/* /Pages/AIAssistant.razor.rz.scp.css */
.ai-assistant-page[b-yp5g0i5z89] {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 2rem;
}

.ai-assistant-header[b-yp5g0i5z89] {
    text-align: center;
    color: white;
    margin-bottom: 2rem;
}

.ai-assistant-header h1[b-yp5g0i5z89] {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ai-assistant-header .subtitle[b-yp5g0i5z89] {
    font-size: 1.1rem;
    opacity: 0.9;
}

.ai-assistant-content[b-yp5g0i5z89] {
    max-width: 700px;
    margin: 0 auto;
    background: white;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

@media (max-width: 768px) {
    .ai-assistant-page[b-yp5g0i5z89] {
        padding: 1rem;
    }

    .ai-assistant-header h1[b-yp5g0i5z89] {
        font-size: 1.8rem;
    }

    .ai-assistant-content[b-yp5g0i5z89] {
        border-radius: 16px;
    }
}
/* /Pages/AITest.razor.rz.scp.css */
.ai-test-container[b-yyy4kqoz33] {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding: 24px;
}

.ai-test-content[b-yyy4kqoz33] {
    max-width: 1400px;
    margin: 0 auto;
}

.ai-test-header[b-yyy4kqoz33] {
    margin-bottom: 24px;
}

.ai-test-header h1[b-yyy4kqoz33] {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.ai-test-header p[b-yyy4kqoz33] {
    color: #666;
    font-size: 13px;
}

.test-section[b-yyy4kqoz33] {
    background: #fff;
    border-radius: 4px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid #e0e0e0;
}

.test-section h2[b-yyy4kqoz33] {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.test-section h2 i[b-yyy4kqoz33] {
    color: #1976d2;
}

.status-grid[b-yyy4kqoz33] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.status-card[b-yyy4kqoz33] {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 16px;
    transition: all 0.2s ease;
}

.status-card.available[b-yyy4kqoz33] {
    border-color: #4caf50;
    background: #e8f5e9;
}

.status-card.unavailable[b-yyy4kqoz33] {
    border-color: #f44336;
    background: #ffebee;
}

.provider-name[b-yyy4kqoz33] {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
}

.default-badge[b-yyy4kqoz33] {
    background: #ff9800;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.provider-status[b-yyy4kqoz33] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.provider-status i[b-yyy4kqoz33] {
    font-size: 14px;
}

.status-card.available .provider-status[b-yyy4kqoz33] {
    color: #2e7d32;
}

.status-card.unavailable .provider-status[b-yyy4kqoz33] {
    color: #c62828;
}

.timestamp[b-yyy4kqoz33] {
    margin-top: 12px;
    font-size: 12px;
    color: #999;
    text-align: right;
}

.form-group[b-yyy4kqoz33] {
    margin-bottom: 16px;
}

.form-group label[b-yyy4kqoz33] {
    display: block;
    font-weight: 500;
    font-size: 12px;
    color: #666;
    margin-bottom: 6px;
}

.form-control[b-yyy4kqoz33] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    color: #333;
    box-sizing: border-box;
}

select.form-control[b-yyy4kqoz33] {
    padding: 8px 40px 8px 12px;
    background-color: #fff;
    cursor: pointer;
    height: 38px;
    line-height: 1.4;
}

.form-control:focus[b-yyy4kqoz33] {
    outline: none;
    border-color: #1976d2;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
}

.result-card[b-yyy4kqoz33] {
    margin-top: 16px;
    border-radius: 4px;
    padding: 16px;
    border: 1px solid;
}

.result-card.success[b-yyy4kqoz33] {
    border-color: #4caf50;
    background: #e8f5e9;
}

.result-card.error[b-yyy4kqoz33] {
    border-color: #f44336;
    background: #ffebee;
}

.result-header[b-yyy4kqoz33] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.result-card.success .result-header[b-yyy4kqoz33] {
    color: #2e7d32;
}

.result-card.error .result-header[b-yyy4kqoz33] {
    color: #c62828;
}

.result-header i[b-yyy4kqoz33] {
    font-size: 16px;
}

.result-content[b-yyy4kqoz33] {
    color: #333;
    font-size: 14px;
}

.ai-response[b-yyy4kqoz33] {
    background: #fff;
    padding: 12px;
    border-radius: 4px;
    border-left: 3px solid #4caf50;
    margin: 10px 0;
    white-space: pre-wrap;
    font-size: 14px;
    line-height: 1.5;
}

.result-meta[b-yyy4kqoz33] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    font-size: 12px;
    color: #666;
}

.error-message[b-yyy4kqoz33] {
    color: #c62828;
    font-weight: 500;
}

button:disabled[b-yyy4kqoz33] {
    opacity: 0.6;
    cursor: not-allowed;
}

.fa-spinner[b-yyy4kqoz33] {
    animation: spin-b-yyy4kqoz33 1s linear infinite;
}

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

/* Responsive */
@media (max-width: 768px) {
    .ai-test-container[b-yyy4kqoz33] {
        padding: 16px;
    }

    .test-section[b-yyy4kqoz33] {
        padding: 16px;
    }

    .status-grid[b-yyy4kqoz33] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Architecture.razor.rz.scp.css */
/* === Base Container === */
.arch-container[b-w5v88ljiue] {
    background-color: #f5f5f5;
    min-height: 100vh;
    margin-left: 72px;
}

.arch-content[b-w5v88ljiue] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* === Page Header === */
.page-header[b-w5v88ljiue] {
    margin-bottom: 8px;
}

.page-header h1[b-w5v88ljiue] {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 4px 0;
}

.subtitle[b-w5v88ljiue] {
    font-size: 13px;
    color: #888;
    margin: 0;
    font-family: monospace;
}

/* === Section Nav === */
.section-nav[b-w5v88ljiue] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.section-nav a[b-w5v88ljiue] {
    font-size: 12px;
    color: #1976d2;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 4px;
    background: #f0f7ff;
    transition: all 0.15s;
}

.section-nav a:hover[b-w5v88ljiue] {
    background: #1976d2;
    color: #fff;
}

/* === Section Cards === */
.arch-section[b-w5v88ljiue] {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.arch-section[open][b-w5v88ljiue] {
    border-color: #c0c0c0;
}

.section-title[b-w5v88ljiue] {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    user-select: none;
    transition: background 0.15s;
}

.section-title:hover[b-w5v88ljiue] {
    background: #fafafa;
}

.section-title[b-w5v88ljiue]::before {
    content: '▶';
    font-size: 10px;
    margin-right: 10px;
    color: #999;
    transition: transform 0.2s;
}

.arch-section[open] > .section-title[b-w5v88ljiue]::before {
    transform: rotate(90deg);
}

/* Hide default marker in Safari/Chrome */
.section-title[b-w5v88ljiue]::-webkit-details-marker {
    display: none;
}

.section-body[b-w5v88ljiue] {
    padding: 0 20px 20px 20px;
}

.section-body h4[b-w5v88ljiue] {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #f0f0f0;
}

.section-body h4:first-child[b-w5v88ljiue] {
    margin-top: 0;
}

/* === Info Grid === */
.info-grid[b-w5v88ljiue] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.info-item[b-w5v88ljiue] {
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #eee;
}

.info-label[b-w5v88ljiue] {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.info-value[b-w5v88ljiue] {
    font-size: 13px;
    color: #333;
    font-weight: 500;
    margin-top: 2px;
}

/* === Structure List === */
.structure-list[b-w5v88ljiue] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.structure-item[b-w5v88ljiue] {
    font-size: 13px;
    color: #444;
    padding: 6px 12px;
    background: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #1976d2;
}

.structure-item code[b-w5v88ljiue] {
    font-weight: 600;
    color: #1976d2;
}

/* === Flow Diagrams === */
.flow-diagram[b-w5v88ljiue] {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 20px 16px;
    background: #fafbfc;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow-x: auto;
    flex-wrap: wrap;
    justify-content: center;
}

.flow-node[b-w5v88ljiue] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px;
    border-radius: 8px;
    border: 2px solid;
    min-width: 100px;
    text-align: center;
    background: #fff;
    flex-shrink: 0;
}

.node-label[b-w5v88ljiue] {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.node-sub[b-w5v88ljiue] {
    font-size: 10px;
    color: #888;
    margin-top: 2px;
}

/* Node color variants */
.node-client[b-w5v88ljiue] {
    border-color: #42a5f5;
    background: #e3f2fd;
}

.node-client .node-label[b-w5v88ljiue] {
    color: #1565c0;
}

.node-server[b-w5v88ljiue] {
    border-color: #66bb6a;
    background: #e8f5e9;
}

.node-server .node-label[b-w5v88ljiue] {
    color: #2e7d32;
}

.node-hub[b-w5v88ljiue] {
    border-color: #ffa726;
    background: #fff3e0;
}

.node-hub .node-label[b-w5v88ljiue] {
    color: #e65100;
}

.node-ai[b-w5v88ljiue] {
    border-color: #ab47bc;
    background: #f3e5f5;
}

.node-ai .node-label[b-w5v88ljiue] {
    color: #7b1fa2;
}

.node-db[b-w5v88ljiue] {
    border-color: #78909c;
    background: #eceff1;
}

.node-db .node-label[b-w5v88ljiue] {
    color: #37474f;
}

/* Arrows */
.flow-arrow[b-w5v88ljiue] {
    font-size: 18px;
    color: #999;
    padding: 0 8px;
    flex-shrink: 0;
    font-weight: 700;
}

.flow-arrow-labeled[b-w5v88ljiue] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 6px;
    flex-shrink: 0;
}

.flow-arrow-labeled .arrow-line[b-w5v88ljiue] {
    font-size: 18px;
    color: #999;
    font-weight: 700;
}

.flow-arrow-labeled .arrow-label[b-w5v88ljiue] {
    font-size: 9px;
    color: #999;
    white-space: nowrap;
    font-family: monospace;
}

/* Bidirectional arrows */
.flow-arrow-bi[b-w5v88ljiue] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 6px;
    gap: 2px;
    flex-shrink: 0;
}

.flow-arrow-bi .arrow-up[b-w5v88ljiue],
.flow-arrow-bi .arrow-down[b-w5v88ljiue] {
    font-size: 9px;
    font-family: monospace;
    white-space: nowrap;
}

.flow-arrow-bi .arrow-up[b-w5v88ljiue] {
    color: #1976d2;
}

.flow-arrow-bi .arrow-down[b-w5v88ljiue] {
    color: #e65100;
}

/* Branch (fork in flow) */
.flow-branch[b-w5v88ljiue] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.branch-path[b-w5v88ljiue] {
    display: flex;
    align-items: center;
}

.branch-divider[b-w5v88ljiue] {
    font-size: 11px;
    color: #999;
    font-weight: 600;
}

/* Flow caption */
.flow-caption[b-w5v88ljiue] {
    font-size: 12px;
    color: #666;
    margin-top: 8px;
    line-height: 1.5;
}

/* === Tables === */
.arch-table[b-w5v88ljiue] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.arch-table th[b-w5v88ljiue] {
    text-align: left;
    padding: 8px 12px;
    background: #f5f5f5;
    color: #555;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 2px solid #e0e0e0;
}

.arch-table td[b-w5v88ljiue] {
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    vertical-align: top;
}

.arch-table tr:last-child td[b-w5v88ljiue] {
    border-bottom: none;
}

.arch-table tr:hover td[b-w5v88ljiue] {
    background: #fafafa;
}

.row-highlight td[b-w5v88ljiue] {
    background: #f0f7ff !important;
}

.arch-table code[b-w5v88ljiue] {
    font-size: 12px;
    background: #f0f0f0;
    padding: 1px 5px;
    border-radius: 3px;
    color: #c7254e;
}

/* === Callout === */
.callout[b-w5v88ljiue] {
    padding: 12px 16px;
    background: #f0f7ff;
    border-left: 3px solid #1976d2;
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    color: #333;
    margin-top: 12px;
    line-height: 1.5;
}

.callout code[b-w5v88ljiue] {
    font-size: 12px;
    background: #e3f2fd;
    padding: 1px 4px;
    border-radius: 3px;
}

.callout-warning[b-w5v88ljiue] {
    background: #fff8e1;
    border-left-color: #ffa000;
}

.callout-warning code[b-w5v88ljiue] {
    background: #fff3e0;
}

/* === Schema Pair === */
.schema-pair[b-w5v88ljiue] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.schema-box[b-w5v88ljiue] {
    padding: 14px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.schema-box h5[b-w5v88ljiue] {
    margin: 0 0 10px 0;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.schema-fields[b-w5v88ljiue] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.schema-fields span[b-w5v88ljiue] {
    font-size: 12px;
    color: #555;
}

.schema-fields code[b-w5v88ljiue] {
    font-weight: 600;
    color: #c7254e;
    background: #f0f0f0;
    padding: 1px 4px;
    border-radius: 2px;
}

.schema-highlight[b-w5v88ljiue] {
    background: #fff3e0;
    padding: 2px 6px;
    border-radius: 3px;
}

/* === Integration Grid === */
.integration-grid[b-w5v88ljiue] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.integration-card[b-w5v88ljiue] {
    padding: 14px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.integration-card h5[b-w5v88ljiue] {
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.integration-card ul[b-w5v88ljiue] {
    margin: 0;
    padding-left: 18px;
}

.integration-card li[b-w5v88ljiue] {
    font-size: 12px;
    color: #555;
    margin-bottom: 3px;
    line-height: 1.4;
}

.integration-card code[b-w5v88ljiue] {
    font-size: 11px;
    background: #f0f0f0;
    padding: 1px 4px;
    border-radius: 2px;
}

/* === Entity Groups === */
.entity-groups[b-w5v88ljiue] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.entity-group[b-w5v88ljiue] {
    padding: 12px 14px;
    background: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 6px;
}

.entity-group h5[b-w5v88ljiue] {
    margin: 0 0 8px 0;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.entity-tag[b-w5v88ljiue] {
    display: inline-block;
    font-size: 11px;
    padding: 3px 8px;
    margin: 2px 4px 2px 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    font-family: monospace;
}

/* === Responsive === */
@media (max-width: 768px) {
    .arch-container[b-w5v88ljiue] {
        margin-left: 0;
    }

    .arch-content[b-w5v88ljiue] {
        padding: 16px;
    }

    .info-grid[b-w5v88ljiue] {
        grid-template-columns: 1fr 1fr;
    }

    .schema-pair[b-w5v88ljiue] {
        grid-template-columns: 1fr;
    }

    .integration-grid[b-w5v88ljiue] {
        grid-template-columns: 1fr;
    }

    .flow-diagram[b-w5v88ljiue] {
        padding: 16px 10px;
    }

    .flow-node[b-w5v88ljiue] {
        min-width: 80px;
        padding: 8px 10px;
    }

    .node-label[b-w5v88ljiue] {
        font-size: 11px;
    }

    .section-nav[b-w5v88ljiue] {
        gap: 4px;
    }

    .section-nav a[b-w5v88ljiue] {
        font-size: 11px;
        padding: 3px 8px;
    }
}

@media (max-width: 480px) {
    .info-grid[b-w5v88ljiue] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/BlobStoragePage.razor.rz.scp.css */
/* === Base Container === */
.blob-storage-container[b-l4u9kwegzg] {
    background-color: #f5f5f5;
    min-height: 100vh;
    margin-left: 72px;
}

.blob-storage-content[b-l4u9kwegzg] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* === Page Header === */
.page-header[b-l4u9kwegzg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.page-header-left h1[b-l4u9kwegzg] {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 4px 0;
}

.page-header-left p[b-l4u9kwegzg] {
    font-size: 13px;
    color: #666;
    margin: 0;
}

.page-header-right[b-l4u9kwegzg] {
    display: flex;
    gap: 8px;
}

/* === Buttons === */
.btn-action[b-l4u9kwegzg] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-action:hover[b-l4u9kwegzg] {
    border-color: #1976d2;
    color: #1976d2;
}

.btn-action:disabled[b-l4u9kwegzg] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* === Filter Bar === */
.filter-bar[b-l4u9kwegzg] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    align-items: center;
}

.search-box[b-l4u9kwegzg] {
    flex: 1;
}

.filter-dropdown[b-l4u9kwegzg] {
    width: 180px;
}

.sort-dropdown[b-l4u9kwegzg] {
    width: 160px;
}

/* === Results Count === */
.results-count[b-l4u9kwegzg] {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

/* === Empty State === */
.empty-state[b-l4u9kwegzg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.empty-state i[b-l4u9kwegzg] {
    font-size: 48px;
    color: #ccc;
    margin-bottom: 16px;
}

.empty-state h3[b-l4u9kwegzg] {
    font-size: 16px;
    color: #333;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.empty-state p[b-l4u9kwegzg] {
    font-size: 13px;
    color: #666;
    margin: 0;
}

/* === Blob Cards === */
.blob-card[b-l4u9kwegzg] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.blob-image-container[b-l4u9kwegzg] {
    width: 100%;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 8px 8px 0 0;
}

.blob-image[b-l4u9kwegzg] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blob-file-icon-container[b-l4u9kwegzg] {
    width: 100%;
    padding-top: 100%;
    position: relative;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px 8px 0 0;
}

.blob-file-icon[b-l4u9kwegzg] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 64px;
    color: #666;
}

.blob-info[b-l4u9kwegzg] {
    padding: 8px 12px;
    border-bottom: 1px solid #e0e0e0;
    cursor: help;
}

.blob-meta[b-l4u9kwegzg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blob-size[b-l4u9kwegzg] {
    font-size: 12px;
    font-weight: 500;
    color: #555;
}

.blob-modified[b-l4u9kwegzg] {
    font-size: 11px;
    color: #999;
}

.blob-usage[b-l4u9kwegzg] {
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
    background-color: #fafafa;
}

.usage-type[b-l4u9kwegzg] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 6px;
}

.usage-unused[b-l4u9kwegzg] {
    background-color: #f0f0f0;
    color: #666;
}

.usage-product[b-l4u9kwegzg] {
    background-color: #e3f2fd;
    color: #1976d2;
}

.usage-qomponent[b-l4u9kwegzg] {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

.usage-multiple[b-l4u9kwegzg] {
    background-color: #fff3e0;
    color: #f57c00;
}

.usage-socialmedia[b-l4u9kwegzg] {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.usage-css[b-l4u9kwegzg] {
    background-color: #fce4ec;
    color: #c2185b;
}

.usage-details[b-l4u9kwegzg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.usage-item[b-l4u9kwegzg] {
    font-size: 11px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blob-actions[b-l4u9kwegzg] {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.action-row[b-l4u9kwegzg] {
    display: flex;
    gap: 6px;
}

.action-row .e-btn[b-l4u9kwegzg] {
    flex: 1;
    justify-content: center;
    font-size: 11px;
    padding: 6px 8px;
}

.CardMargin[b-l4u9kwegzg] {
    margin-bottom: 16px;
    padding: 0 8px;
}

.text-warning[b-l4u9kwegzg] {
    color: #e53935;
    font-size: 13px;
    margin-top: 10px;
}

/* === Responsive === */
@media (max-width: 768px) {
    .blob-storage-container[b-l4u9kwegzg] {
        margin-left: 0;
    }

    .blob-storage-content[b-l4u9kwegzg] {
        padding: 16px;
    }

    .page-header[b-l4u9kwegzg] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .page-header-right[b-l4u9kwegzg] {
        width: 100%;
    }

    .btn-action[b-l4u9kwegzg] {
        flex: 1;
        justify-content: center;
    }

    .filter-bar[b-l4u9kwegzg] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-l4u9kwegzg],
    .filter-dropdown[b-l4u9kwegzg],
    .sort-dropdown[b-l4u9kwegzg] {
        width: 100%;
    }
}
/* /Pages/BrandReviewPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Brand Review Page — scoped styles (br- prefix)
   Monthly spot-check of auto-published posts for brand
   consistency review with drift flagging.
   ═══════════════════════════════════════════════════════════ */

/* ── Layout ── */

.br-container[b-zcglxhw1xw] {
    background-color: #f5f5f5;
    min-height: 100vh;
    margin-left: 72px;
}

.br-content[b-zcglxhw1xw] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Page Header ── */

.br-page-header[b-zcglxhw1xw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.br-page-header-left[b-zcglxhw1xw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.br-page-title[b-zcglxhw1xw] {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.02em;
}

.br-page-subtitle[b-zcglxhw1xw] {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

.br-page-header-right[b-zcglxhw1xw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Feedback Banner ── */

.br-feedback-banner[b-zcglxhw1xw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}

.br-feedback-success[b-zcglxhw1xw] {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #86efac;
}

.br-feedback-error[b-zcglxhw1xw] {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

/* ── Skeleton Loading ── */

.br-skeleton-grid[b-zcglxhw1xw] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.br-session-card.skeleton[b-zcglxhw1xw],
.br-item-card.skeleton[b-zcglxhw1xw] {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.br-skeleton-header[b-zcglxhw1xw] {
    height: 24px;
    background: #e2e8f0;
    border-radius: 4px;
    width: 40%;
    animation: br-pulse-b-zcglxhw1xw 1.5s infinite;
}

.br-skeleton-line[b-zcglxhw1xw] {
    height: 16px;
    background: #e2e8f0;
    border-radius: 4px;
    animation: br-pulse-b-zcglxhw1xw 1.5s infinite;
}

.br-skeleton-line-short[b-zcglxhw1xw] {
    width: 60%;
}

@keyframes br-pulse-b-zcglxhw1xw {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

/* ── Empty State ── */

.br-empty-state[b-zcglxhw1xw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 24px;
    text-align: center;
}

.br-empty-title[b-zcglxhw1xw] {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.br-empty-desc[b-zcglxhw1xw] {
    font-size: 14px;
    color: #64748b;
    margin: 0;
    max-width: 420px;
}

/* ── Session List Grid ── */

.br-sessions-grid[b-zcglxhw1xw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* ── Session Card ── */

.br-session-card[b-zcglxhw1xw] {
    background: #fff;
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.br-session-card:hover[b-zcglxhw1xw] {
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    border-color: #6366f1;
}

.br-session-header[b-zcglxhw1xw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.br-session-month[b-zcglxhw1xw] {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.br-session-stats[b-zcglxhw1xw] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.br-stat-chip[b-zcglxhw1xw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.br-stat-chip.br-stat-drift[b-zcglxhw1xw] {
    background: #fee2e2;
    color: #b91c1c;
}

.br-session-created[b-zcglxhw1xw] {
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ── Status Badge ── */

.br-status-badge[b-zcglxhw1xw] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.br-status-pending[b-zcglxhw1xw] {
    background: #fef3c7;
    color: #92400e;
}

.br-status-completed[b-zcglxhw1xw] {
    background: #dcfce7;
    color: #166534;
}

/* ── Detail Header ── */

.br-detail-header[b-zcglxhw1xw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 2px solid #e2e8f0;
}

.br-detail-month[b-zcglxhw1xw] {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: capitalize;
}

.br-detail-count[b-zcglxhw1xw] {
    font-size: 12px;
    color: #64748b;
}

/* ── Items Grid ── */

.br-items-grid[b-zcglxhw1xw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Item Card ── */

.br-item-card[b-zcglxhw1xw] {
    background: #fff;
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.15s ease;
}

.br-item-card:hover[b-zcglxhw1xw] {
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

.br-item-card.br-card-drift[b-zcglxhw1xw] {
    border-color: #fca5a5;
    background: #fffafa;
}

/* ── Card Header ── */

.br-card-header[b-zcglxhw1xw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.br-badges-row[b-zcglxhw1xw] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── Confidence Badge ── */

.br-confidence-badge[b-zcglxhw1xw] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    min-width: 44px;
    justify-content: center;
}

.br-badge-red[b-zcglxhw1xw]    { background: #ef4444; }
.br-badge-amber[b-zcglxhw1xw]  { background: #f59e0b; }
.br-badge-green[b-zcglxhw1xw]  { background: #22c55e; }

/* ── Platform Badge ── */

.br-platform-badge[b-zcglxhw1xw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
}

.br-platform-instagram[b-zcglxhw1xw] { background: #fce7f3; color: #9d174d; }
.br-platform-facebook[b-zcglxhw1xw]  { background: #dbeafe; color: #1d4ed8; }
.br-platform-tiktok[b-zcglxhw1xw]    { background: #f0fdf4; color: #166534; }

/* ── Post Type Badge ── */

.br-posttype-badge[b-zcglxhw1xw] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: #ede9fe;
    color: #5b21b6;
}

/* ── Drift Badge ── */

.br-drift-badge[b-zcglxhw1xw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    background: #fee2e2;
    color: #b91c1c;
}

/* ── Published Time ── */

.br-published-time[b-zcglxhw1xw] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #64748b;
}

/* ── Post Preview ── */

.br-post-preview[b-zcglxhw1xw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.br-product-name[b-zcglxhw1xw] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #475569;
}

.br-caption[b-zcglxhw1xw] {
    font-size: 14px;
    color: #1e293b;
    line-height: 1.5;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.br-image-prompt[b-zcglxhw1xw] {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    flex-wrap: wrap;
}

.br-image-prompt-label[b-zcglxhw1xw] {
    font-weight: 600;
    color: #475569;
    flex-shrink: 0;
}

.br-image-prompt-text[b-zcglxhw1xw] {
    font-style: italic;
}

.br-image-thumb-wrap[b-zcglxhw1xw] {
    margin-top: 4px;
}

.br-image-thumb[b-zcglxhw1xw] {
    max-width: 140px;
    max-height: 140px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #e2e8f0;
}

/* ── Engagement Stats ── */

.br-engagement-stats[b-zcglxhw1xw] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.br-stat[b-zcglxhw1xw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #475569;
    font-weight: 500;
}

.br-stat-rate[b-zcglxhw1xw] {
    color: #0369a1;
    font-weight: 700;
}

/* ── Reviewer Note ── */

.br-reviewer-note[b-zcglxhw1xw] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: #fff7ed;
    border-radius: 6px;
    border-left: 3px solid #f59e0b;
    font-size: 13px;
    color: #78350f;
    font-style: italic;
}

/* ── Drift Textarea ── */

.br-drift-textarea[b-zcglxhw1xw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: #fef9f0;
    border-radius: 6px;
    border: 1px solid #fde68a;
}

.br-drift-label[b-zcglxhw1xw] {
    font-size: 12px;
    font-weight: 600;
    color: #78350f;
}

.br-drift-input[b-zcglxhw1xw] {
    width: 100%;
    min-height: 72px;
    padding: 10px 12px;
    border: 1.5px solid #fbbf24;
    border-radius: 6px;
    font-size: 14px;
    color: #1e293b;
    resize: vertical;
    box-sizing: border-box;
    background: #fff;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.15s;
}

.br-drift-input:focus[b-zcglxhw1xw] {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245,158,11,.15);
}

.br-drift-actions[b-zcglxhw1xw] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Actions ── */

.br-actions[b-zcglxhw1xw] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid #f1f5f9;
}

/* ── Buttons ── */

.br-btn[b-zcglxhw1xw] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
    background: transparent;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.br-btn:disabled[b-zcglxhw1xw] {
    opacity: 0.6;
    cursor: not-allowed;
}

.br-btn-generate[b-zcglxhw1xw] {
    color: #fff;
    background: #6366f1;
    border-color: #6366f1;
}

.br-btn-generate:hover:not(:disabled)[b-zcglxhw1xw] {
    background: #4f46e5;
    border-color: #4f46e5;
}

.br-btn-back[b-zcglxhw1xw] {
    color: #475569;
    border-color: #94a3b8;
}

.br-btn-back:hover[b-zcglxhw1xw] {
    background: #f1f5f9;
    color: #1e293b;
}

.br-btn-flag[b-zcglxhw1xw] {
    color: #b91c1c;
    border-color: #fca5a5;
}

.br-btn-flag:hover[b-zcglxhw1xw] {
    background: #fef2f2;
    border-color: #dc2626;
}

.br-btn-submit[b-zcglxhw1xw] {
    color: #fff;
    background: #dc2626;
    border-color: #dc2626;
}

.br-btn-submit:hover:not(:disabled)[b-zcglxhw1xw] {
    background: #b91c1c;
    border-color: #b91c1c;
}

.br-btn-cancel[b-zcglxhw1xw] {
    color: #64748b;
    border-color: #94a3b8;
}

.br-btn-cancel:hover[b-zcglxhw1xw] {
    background: #f1f5f9;
    color: #475569;
}

/* ── Responsive ── */

@media (max-width: 640px) {
    .br-container[b-zcglxhw1xw] {
        margin-left: 0;
    }

    .br-content[b-zcglxhw1xw] {
        padding: 16px 12px;
    }

    .br-card-header[b-zcglxhw1xw] {
        flex-direction: column;
    }

    .br-sessions-grid[b-zcglxhw1xw] {
        grid-template-columns: 1fr;
    }

    .br-actions[b-zcglxhw1xw] {
        flex-direction: column;
    }

    .br-btn[b-zcglxhw1xw] {
        justify-content: center;
    }
}
/* /Pages/BusinessUnitAdminPage.razor.rz.scp.css */
/* Business unit admin now uses shared workspace/capability primitives. */
/* /Pages/CampaignPage.razor.rz.scp.css */
.campaign-page[b-xj5zvu44ej] {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 20px;
}

/* Page header */
.page-header[b-xj5zvu44ej] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.page-title[b-xj5zvu44ej] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    flex: 1;
}

/* Buttons */
.btn-primary[b-xj5zvu44ej] {
    padding: 9px 22px;
    background: #1976d2;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.btn-primary:hover[b-xj5zvu44ej] {
    background: #1565c0;
}

.btn-back[b-xj5zvu44ej] {
    padding: 7px 14px;
    background: transparent;
    color: #555;
    border: 1px solid #bdbdbd;
    border-radius: 7px;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-back:hover[b-xj5zvu44ej] {
    background: #f5f5f5;
}

.btn-cancel-campaign[b-xj5zvu44ej] {
    padding: 8px 20px;
    background: #b71c1c;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-cancel-campaign:hover[b-xj5zvu44ej] {
    background: #7f0000;
}

/* Loading */
.loading-indicator[b-xj5zvu44ej] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 40px;
    color: #666;
    font-size: 0.95rem;
    justify-content: center;
}

.spinner[b-xj5zvu44ej] {
    width: 24px;
    height: 24px;
    border: 3px solid #e0e0e0;
    border-top-color: #1976d2;
    border-radius: 50%;
    animation: spin-b-xj5zvu44ej 0.7s linear infinite;
    flex-shrink: 0;
}

.spinner.large[b-xj5zvu44ej] {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

@keyframes spin-b-xj5zvu44ej {
    to { transform: rotate(360deg); }
}

/* Generating overlay */
.generating-overlay[b-xj5zvu44ej] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 16px;
}

.generating-text[b-xj5zvu44ej] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a2e;
}

.generating-hint[b-xj5zvu44ej] {
    font-size: 0.88rem;
    color: #666;
}

/* Empty state */
.empty-state[b-xj5zvu44ej] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 20px;
    gap: 16px;
    text-align: center;
}

.empty-icon[b-xj5zvu44ej] {
    font-size: 3rem;
    line-height: 1;
}

.empty-text[b-xj5zvu44ej] {
    color: #666;
    font-size: 0.95rem;
    margin: 0;
    max-width: 380px;
}

/* Status badges */
.status-badge[b-xj5zvu44ej] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.status-badge.small[b-xj5zvu44ej] {
    font-size: 0.72rem;
    padding: 2px 8px;
}

.status-draft[b-xj5zvu44ej]       { background: #e0e0e0; color: #424242; }
.status-scheduled[b-xj5zvu44ej]   { background: #bbdefb; color: #0d47a1; }
.status-inprogress[b-xj5zvu44ej]  { background: #ffe0b2; color: #e65100; }
.status-completed[b-xj5zvu44ej]   { background: #c8e6c9; color: #1b5e20; }
.status-cancelled[b-xj5zvu44ej]   { background: #ffcdd2; color: #b71c1c; }
.status-pending[b-xj5zvu44ej]     { background: #f5f5f5; color: #616161; }
.status-published[b-xj5zvu44ej]   { background: #c8e6c9; color: #1b5e20; }
.status-failed[b-xj5zvu44ej]      { background: #ffcdd2; color: #b71c1c; }

/* Campaign list */
.campaigns-list[b-xj5zvu44ej] {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}

.campaign-row[b-xj5zvu44ej] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.12s;
    gap: 16px;
    flex-wrap: wrap;
}

.campaign-row:last-child[b-xj5zvu44ej] {
    border-bottom: none;
}

.campaign-row:hover[b-xj5zvu44ej] {
    background: #f8f9ff;
}

.campaign-row-main[b-xj5zvu44ej] {
    flex: 1;
    min-width: 0;
}

.campaign-name[b-xj5zvu44ej] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campaign-theme[b-xj5zvu44ej] {
    font-size: 0.8rem;
    color: #757575;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campaign-row-meta[b-xj5zvu44ej] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.campaign-count[b-xj5zvu44ej],
.campaign-dates[b-xj5zvu44ej],
.campaign-created[b-xj5zvu44ej] {
    font-size: 0.78rem;
    color: #888;
}

/* Error toast */
.error-toast[b-xj5zvu44ej] {
    margin-top: 1rem;
    padding: 10px 16px;
    background: #ffebee;
    border: 1px solid #ef9a9a;
    border-radius: 8px;
    color: #b71c1c;
    font-size: 0.88rem;
}

/* Detail view */
.detail-theme[b-xj5zvu44ej] {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 12px;
    padding: 12px 16px;
    background: #f8f9ff;
    border-radius: 8px;
    border-left: 3px solid #1976d2;
}

.detail-meta[b-xj5zvu44ej] {
    display: flex;
    gap: 16px;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.detail-actions[b-xj5zvu44ej] {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.detail-hint[b-xj5zvu44ej] {
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
}

.section-title[b-xj5zvu44ej] {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 12px 0;
}

.detail-posts[b-xj5zvu44ej] {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}

.detail-posts .section-title[b-xj5zvu44ej] {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    margin: 0;
}

.post-row[b-xj5zvu44ej] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f5;
}

.post-row:last-child[b-xj5zvu44ej] {
    border-bottom: none;
}

.post-thumb[b-xj5zvu44ej] {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    border: 1px solid #e0e0e0;
}

.post-info[b-xj5zvu44ej] {
    flex: 1;
    min-width: 0;
}

.post-product[b-xj5zvu44ej] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #212121;
}

.post-time[b-xj5zvu44ej] {
    font-size: 0.78rem;
    color: #1976d2;
    margin-top: 2px;
}

.post-caption[b-xj5zvu44ej] {
    font-size: 0.78rem;
    color: #666;
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* /Pages/CatalogueV2Page.razor.rz.scp.css */
/* === Page Layout === */
.catalogue-container[b-fgbl67291v] {
    padding: 24px 32px;
    max-width: 1400px;
    margin: 0 auto;
    min-height: 100vh;
}

.catalogue-header[b-fgbl67291v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.catalogue-header-left[b-fgbl67291v] {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.catalogue-title[b-fgbl67291v] {
    font-size: 24px;
    font-weight: 700;
    color: #1e2330;
    margin: 0;
}

.catalogue-count[b-fgbl67291v] {
    font-size: 14px;
    color: #8b92a0;
}

.catalogue-header-right[b-fgbl67291v] {
    display: flex;
    align-items: center;
    gap: 12px;
}

[b-fgbl67291v] .catalogue-new-btn {
    background: #1784c7 !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
}

[b-fgbl67291v] .catalogue-new-btn:hover {
    background: #1369a0 !important;
}

.catalogue-view-toggle[b-fgbl67291v] {
    display: flex;
    background: #e9ecef;
    border-radius: 8px;
    padding: 2px;
}

.toggle-btn[b-fgbl67291v] {
    background: transparent;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.15s ease;
}

.toggle-btn.active[b-fgbl67291v] {
    background: white;
    color: #1e2330;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.toggle-btn:hover:not(.active)[b-fgbl67291v] {
    color: #1e2330;
}

/* === Product Grid === */
.product-grid[b-fgbl67291v] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}

/* === Product Card === */
.product-card[b-fgbl67291v] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover[b-fgbl67291v] {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* === Card Image === */
.product-card-image[b-fgbl67291v] {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: #f0f0f0;
}

.product-card-image img[b-fgbl67291v] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .product-card-image img[b-fgbl67291v] {
    transform: scale(1.05);
}

/* === Category Badge === */
.category-badge[b-fgbl67291v] {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    backdrop-filter: blur(4px);
}

.cat-green[b-fgbl67291v] { background: rgba(46, 125, 50, 0.85); color: white; }
.cat-orange[b-fgbl67291v] { background: rgba(230, 81, 0, 0.85); color: white; }
.cat-red[b-fgbl67291v] { background: rgba(198, 40, 40, 0.85); color: white; }
.cat-teal[b-fgbl67291v] { background: rgba(0, 121, 107, 0.85); color: white; }
.cat-purple[b-fgbl67291v] { background: rgba(106, 27, 154, 0.85); color: white; }
.cat-blue[b-fgbl67291v] { background: rgba(21, 101, 192, 0.85); color: white; }
.cat-amber[b-fgbl67291v] { background: rgba(255, 143, 0, 0.85); color: white; }
.cat-pink[b-fgbl67291v] { background: rgba(173, 20, 87, 0.85); color: white; }
.cat-grey[b-fgbl67291v] { background: rgba(97, 97, 97, 0.85); color: white; }

/* === Card Body === */
.product-card-body[b-fgbl67291v] {
    padding: 12px 14px 14px;
}

.product-card-number[b-fgbl67291v] {
    font-size: 11px;
    font-weight: 600;
    color: #8b92a0;
    margin-bottom: 2px;
}

.product-card-name[b-fgbl67291v] {
    font-size: 14px;
    font-weight: 600;
    color: #1e2330;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.product-card-desc[b-fgbl67291v] {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 8px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-price-row[b-fgbl67291v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-card-price[b-fgbl67291v] {
    font-size: 15px;
    font-weight: 700;
    color: #1784c7;
}

.product-card-lunch[b-fgbl67291v] {
    font-size: 11px;
    color: #9ca3af;
}

/* === Product List View === */
.product-list[b-fgbl67291v] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.product-list-header[b-fgbl67291v],
.product-list-row[b-fgbl67291v] {
    display: grid;
    grid-template-columns: 56px 60px 1fr 120px 80px 80px 100px;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
}

.product-list-header[b-fgbl67291v] {
    background: #fafbfc;
    border-bottom: 1px solid #e9ecef;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #8b92a0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.product-list-row[b-fgbl67291v] {
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f1f3;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.product-list-row:last-child[b-fgbl67291v] {
    border-bottom: none;
}

.product-list-row:hover[b-fgbl67291v] {
    background-color: #f8f9fb;
}

.list-thumb[b-fgbl67291v] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    max-width: 44px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}

.list-col-image[b-fgbl67291v] {
    width: 44px;
    min-width: 44px;
    overflow: hidden;
}

.list-col-number[b-fgbl67291v] {
    font-size: 13px;
    font-weight: 600;
    color: #8b92a0;
}

.list-col-name[b-fgbl67291v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.list-product-name[b-fgbl67291v] {
    font-size: 14px;
    font-weight: 600;
    color: #1e2330;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-product-desc[b-fgbl67291v] {
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-col-price[b-fgbl67291v] {
    font-size: 14px;
    font-weight: 700;
    color: #1784c7;
    text-align: right;
}

.list-col-lunch[b-fgbl67291v] {
    font-size: 13px;
    color: #9ca3af;
    text-align: right;
}

.list-col-updated[b-fgbl67291v] {
    font-size: 12px;
    color: #9ca3af;
    text-align: right;
}

.list-col-category[b-fgbl67291v] {
    text-align: center;
}

/* === Responsive === */
@media (max-width: 768px) {
    .catalogue-container[b-fgbl67291v] {
        padding: 16px;
    }

    .product-grid[b-fgbl67291v] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .catalogue-header[b-fgbl67291v] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .catalogue-header-right[b-fgbl67291v] {
        width: 100%;
        justify-content: space-between;
    }
}
/* /Pages/Checkout.razor.rz.scp.css */
body[b-ax08yuk0v1] {
    background-color: #f2f2f2;
}

.Cart[b-ax08yuk0v1] {
    background-color: #000000;
    position: fixed;
    left: 50%;
    bottom: 40px;
    z-index: 101;
    width: 250px;
    margin-left: -125px; /* Negative half of width. */
}

.CardPositionCenter[b-ax08yuk0v1] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.CardBottomMargin[b-ax08yuk0v1] {
    padding-bottom: 10px;
}


 [b-ax08yuk0v1] .e-card .e-card-content {
        padding: 0px;
    }

.MessageToUser[b-ax08yuk0v1] {
    font-family: Helvetica, 'Segoe UI' !important;
    vert-align: top;
    padding: 20px;
    font-size: medium;
}

.OrderNumber[b-ax08yuk0v1] {
    font-size: 60px;
    width: 3em;
    padding: 0.2em 0.2em;
}

.CardHeader[b-ax08yuk0v1] {
    font-size: small;
    color: #808080;
    margin: 5px;
    font-weight: 500;
}

 .wrapper[b-ax08yuk0v1] {
     width: auto;
     height: auto;
     box-sizing: border-box;
     display: grid;
     grid-auto-flow: row;
     /*grid-template-columns: 50px auto 65px;*/
     color: #808080;
 }

 .left[b-ax08yuk0v1] {
     /*height: 65px;*/
 }

 .Center[b-ax08yuk0v1] {
     text-align: left;
     /* height: 65px;*/
 }

 .right[b-ax08yuk0v1] {
     /*height: 65px;*/
 }

.ProductNumber[b-ax08yuk0v1] {
    position: absolute;
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 14px !important;
    font-weight: 700;
    padding-top: 5px;
    padding-left: 0.6em;
}

.ProductName[b-ax08yuk0v1] {
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 14px !important;
    font-weight: 700;
    padding-top: 5px;
    padding-left: 0.6em;
}

.ProductDescription[b-ax08yuk0v1] {
    padding-top: 2px;
    padding-left: 0.6em;
    word-wrap: break-word;
}

 .DescriptionText[b-ax08yuk0v1] {
     width: 97%;
     font-family: Helvetica, 'Segoe UI' !important;
     font-size: 12px !important;
 }

.ProductPrice[b-ax08yuk0v1] {
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 14px !important;
    font-weight: 700;
    padding-top: 5px;
    padding-left: 0.6em;
    right: 20px;
    position: absolute;
    width: 6em;
}


/*Buttons*/
[b-ax08yuk0v1] .BackToShopping {
    margin-top: 10px;
}

[b-ax08yuk0v1] .Pay {
    margin-top: 10px;
    position: absolute;
    right: 0;
}

[b-ax08yuk0v1] .e-priceButtonWidth {
    width: 4rem;
}




/*Accordion*/
[b-ax08yuk0v1] .e-acrdn-header-content {
    justify-content: center;
    width: 97%;
    color: #808080;
}

[b-ax08yuk0v1] .e-accordion .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content {
    border-top: 0px solid rgba(0,0,0,0.13);
    color: #808080;
    width: 97%;
}

[b-ax08yuk0v1] .e-accordion .e-acrdn-item .e-acrdn-header {
    /*line-height: 0px;*/
    width: 97%;
    margin-bottom: 5px;
    min-height: 5em;
    /* white-space: normal for Linebreak*/
    white-space: normal;
}
 


[b-ax08yuk0v1] .BackToShopping {
     margin-top: 10px;
 }

 :deep .Pay[b-ax08yuk0v1] {
     margin-top: 10px;
     position: absolute;
     right: 0;
 }

 [b-ax08yuk0v1] .ProductDeleteButton {
     background: rgba(255, 255, 255, 0.7);
     color: #6c757d;
     position: absolute;
     height: 23px;
     width: 55px;
     right: 40px;
     top: 31px;
 }
/* /Pages/CircleDetailPage.razor.rz.scp.css */
.circle-detail-page[b-kg2kdubgdq] {
    min-height: 100vh;
    background: #0f0f1a;
    color: #ffffff;
    padding: 1rem 1rem 4rem;
    max-width: 600px;
    margin: 0 auto;
}

.detail-loading[b-kg2kdubgdq],
.detail-not-found[b-kg2kdubgdq],
.members-loading[b-kg2kdubgdq],
.token-loading[b-kg2kdubgdq] {
    text-align: center;
    color: #888;
    padding: 3rem 0;
}

/* Header */
.detail-header[b-kg2kdubgdq] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.btn-back-icon[b-kg2kdubgdq] {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.4rem;
    color: #aaa;
    font-size: 1.1rem;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    margin-top: 0.2rem;
    flex-shrink: 0;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.btn-back-icon:hover[b-kg2kdubgdq] {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}

.btn-back[b-kg2kdubgdq] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ccc;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    margin-top: 1rem;
}

.detail-header-info[b-kg2kdubgdq] {
    flex: 1;
}

.detail-name[b-kg2kdubgdq] {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    color: #ffffff;
}

.detail-description[b-kg2kdubgdq] {
    font-size: 0.875rem;
    color: #aaa;
    margin: 0 0 0.5rem;
}

.detail-badges[b-kg2kdubgdq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.badge[b-kg2kdubgdq] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-cadence[b-kg2kdubgdq] {
    background: rgba(255, 255, 255, 0.08);
    color: #ccc;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.badge-count[b-kg2kdubgdq] {
    background: rgba(0, 212, 170, 0.1);
    color: #00d4aa;
    border: 1px solid rgba(0, 212, 170, 0.25);
}

.badge-public[b-kg2kdubgdq] {
    background: rgba(99, 179, 237, 0.1);
    color: #63b3ed;
    border: 1px solid rgba(99, 179, 237, 0.25);
}

/* Sections */
.detail-section[b-kg2kdubgdq] {
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.section-title[b-kg2kdubgdq] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.75rem;
}

/* Members */
.members-list[b-kg2kdubgdq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.member-row[b-kg2kdubgdq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.member-row:last-child[b-kg2kdubgdq] {
    border-bottom: none;
}

.member-info[b-kg2kdubgdq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.member-name[b-kg2kdubgdq] {
    font-size: 0.9rem;
    color: #ffffff;
}

.member-role-badge[b-kg2kdubgdq] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 0.2rem;
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.btn-remove-member[b-kg2kdubgdq],
.btn-leave[b-kg2kdubgdq] {
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    border-radius: 0.35rem;
    cursor: pointer;
    border: 1px solid;
    transition: background 0.15s ease;
}

.btn-remove-member[b-kg2kdubgdq] {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

.btn-remove-member:hover[b-kg2kdubgdq] {
    background: rgba(239, 68, 68, 0.2);
}

.btn-leave[b-kg2kdubgdq] {
    background: rgba(255, 255, 255, 0.06);
    color: #ccc;
    border-color: rgba(255, 255, 255, 0.15);
}

.btn-leave:hover[b-kg2kdubgdq] {
    background: rgba(255, 255, 255, 0.12);
}

/* Invite */
.invite-url-row[b-kg2kdubgdq] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.invite-url-input[b-kg2kdubgdq] {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    color: #ccc;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-copy[b-kg2kdubgdq] {
    background: #00d4aa;
    color: #000;
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.btn-copy:hover[b-kg2kdubgdq] {
    background: #00b896;
}

.qr-section[b-kg2kdubgdq] {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
}

/* Settings */
.settings-header[b-kg2kdubgdq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.settings-header .section-title[b-kg2kdubgdq] {
    margin-bottom: 0;
}

.btn-toggle-settings[b-kg2kdubgdq] {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.4rem;
    color: #ccc;
    font-size: 0.8rem;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-toggle-settings:hover[b-kg2kdubgdq] {
    background: rgba(255, 255, 255, 0.12);
}

.settings-form[b-kg2kdubgdq] {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 0.75rem;
    margin-bottom: 1rem;
}

.form-group[b-kg2kdubgdq] {
    margin-bottom: 0.85rem;
}

.form-group-toggle[b-kg2kdubgdq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.form-label[b-kg2kdubgdq] {
    display: block;
    font-size: 0.75rem;
    color: #aaa;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-input[b-kg2kdubgdq],
.form-textarea[b-kg2kdubgdq],
.form-select[b-kg2kdubgdq] {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    color: #ffffff;
    padding: 0.55rem 0.7rem;
    font-size: 0.875rem;
    box-sizing: border-box;
}

.form-input:focus[b-kg2kdubgdq],
.form-textarea:focus[b-kg2kdubgdq],
.form-select:focus[b-kg2kdubgdq] {
    outline: none;
    border-color: #00d4aa;
}

.form-textarea[b-kg2kdubgdq] {
    resize: vertical;
    min-height: 70px;
}

.form-select option[b-kg2kdubgdq] {
    background: #1a1a2e;
    color: #ffffff;
}

.form-checkbox[b-kg2kdubgdq] {
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
    accent-color: #00d4aa;
}

.form-error[b-kg2kdubgdq] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
    border-radius: 0.4rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.82rem;
    margin-bottom: 0.75rem;
}

.btn-save-settings[b-kg2kdubgdq] {
    width: 100%;
    background: #00d4aa;
    color: #000;
    border: none;
    border-radius: 0.5rem;
    padding: 0.6rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.btn-save-settings:hover:not(:disabled)[b-kg2kdubgdq] {
    background: #00b896;
}

.btn-save-settings:disabled[b-kg2kdubgdq] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Rounds */
.rounds-section[b-kg2kdubgdq] {
    margin-bottom: 1rem;
}

.rounds-loading[b-kg2kdubgdq] {
    text-align: center;
    color: #888;
    padding: 1.5rem 0;
    font-size: 0.875rem;
}

.empty-round[b-kg2kdubgdq] {
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    color: #888;
    margin-bottom: 0.5rem;
}

.empty-round p[b-kg2kdubgdq] {
    margin: 0 0 1rem;
    font-size: 0.875rem;
}

.btn-spontaneous[b-kg2kdubgdq] {
    background: #00d4aa;
    color: #000;
    border: none;
    border-radius: 2rem;
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.btn-spontaneous:hover:not(:disabled)[b-kg2kdubgdq] {
    background: #00b896;
}

.btn-spontaneous:disabled[b-kg2kdubgdq] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-spontaneous--secondary[b-kg2kdubgdq] {
    background: rgba(0, 212, 170, 0.12);
    color: #00d4aa;
    border: 1px solid rgba(0, 212, 170, 0.3);
}

.btn-spontaneous--secondary:hover:not(:disabled)[b-kg2kdubgdq] {
    background: rgba(0, 212, 170, 0.22);
}

.btn-spontaneous-row[b-kg2kdubgdq] {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}

/* History */
.history-section[b-kg2kdubgdq] {
    font-size: 0.875rem;
}

.history-section .section-title[b-kg2kdubgdq] {
    margin-bottom: 0.5rem;
}

/* Danger zone */
.danger-zone[b-kg2kdubgdq] {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
}

.btn-delete[b-kg2kdubgdq] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
    border-radius: 0.5rem;
    padding: 0.55rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-delete:hover:not(:disabled)[b-kg2kdubgdq] {
    background: rgba(239, 68, 68, 0.2);
}

.btn-delete:disabled[b-kg2kdubgdq] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Pages/CircleJoinPage.razor.rz.scp.css */
.join-page[b-ejwz371utz] {
    min-height: 100vh;
    background: #0f0f1a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}

.join-loading[b-ejwz371utz] {
    color: #888;
    font-size: 1rem;
}

.join-not-found[b-ejwz371utz],
.join-success[b-ejwz371utz],
.join-card[b-ejwz371utz] {
    text-align: center;
    max-width: 380px;
    width: 100%;
}

.join-icon[b-ejwz371utz] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.join-title[b-ejwz371utz] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem;
}

.join-subtitle[b-ejwz371utz] {
    color: #aaa;
    font-size: 0.95rem;
    margin: 0 0 1.5rem;
}

/* Circle info card */
.join-circle-info[b-ejwz371utz] {
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin: 1.25rem 0;
}

.join-circle-name[b-ejwz371utz] {
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.75rem;
}

.join-meta[b-ejwz371utz] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
}

.join-meta-item[b-ejwz371utz] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.07);
    color: #ccc;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.join-meta-public[b-ejwz371utz] {
    background: rgba(0, 212, 170, 0.1);
    color: #00d4aa;
    border-color: rgba(0, 212, 170, 0.25);
}

/* Join button */
.btn-join[b-ejwz371utz] {
    width: 100%;
    background: #00d4aa;
    color: #000;
    border: none;
    border-radius: 0.5rem;
    padding: 0.8rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
    letter-spacing: 0.02em;
}

.btn-join:hover:not(:disabled)[b-ejwz371utz] {
    background: #00b896;
}

.btn-join:disabled[b-ejwz371utz] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Back button */
.btn-back[b-ejwz371utz] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ccc;
    border-radius: 0.5rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-back:hover[b-ejwz371utz] {
    background: rgba(255, 255, 255, 0.14);
}

/* Error */
.join-error[b-ejwz371utz] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
    border-radius: 0.4rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    text-align: left;
}

/* Success */
.join-success .join-icon[b-ejwz371utz] {
    color: #00d4aa;
}

.join-redirecting[b-ejwz371utz] {
    color: #666;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}
/* /Pages/CirclesPage.razor.rz.scp.css */
.circles-page[b-hp82rut75y] {
    min-height: 100vh;
    background: #0f0f1a;
    color: #ffffff;
    padding: 1.5rem 1rem 4rem;
    max-width: 600px;
    margin: 0 auto;
}

.circles-header[b-hp82rut75y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.circles-title[b-hp82rut75y] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.btn-create[b-hp82rut75y] {
    background: #00d4aa;
    color: #000000;
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.btn-create:hover[b-hp82rut75y] {
    background: #00b896;
}

/* Create form */
.create-form[b-hp82rut75y] {
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.form-title[b-hp82rut75y] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 1rem;
}

.form-group[b-hp82rut75y] {
    margin-bottom: 1rem;
}

.form-group-toggle[b-hp82rut75y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.form-label[b-hp82rut75y] {
    display: block;
    font-size: 0.8rem;
    color: #aaa;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-input[b-hp82rut75y],
.form-textarea[b-hp82rut75y],
.form-select[b-hp82rut75y] {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    color: #ffffff;
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.form-input:focus[b-hp82rut75y],
.form-textarea:focus[b-hp82rut75y],
.form-select:focus[b-hp82rut75y] {
    outline: none;
    border-color: #00d4aa;
}

.form-textarea[b-hp82rut75y] {
    resize: vertical;
    min-height: 80px;
}

.form-select[b-hp82rut75y] {
    appearance: none;
    cursor: pointer;
}

.form-select option[b-hp82rut75y] {
    background: #1a1a2e;
    color: #ffffff;
}

.form-checkbox[b-hp82rut75y] {
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
    accent-color: #00d4aa;
}

.form-error[b-hp82rut75y] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
    border-radius: 0.4rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.btn-submit[b-hp82rut75y] {
    width: 100%;
    background: #00d4aa;
    color: #000000;
    border: none;
    border-radius: 0.5rem;
    padding: 0.7rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.btn-submit:hover:not(:disabled)[b-hp82rut75y] {
    background: #00b896;
}

.btn-submit:disabled[b-hp82rut75y] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* List */
.circles-list[b-hp82rut75y] {
    display: flex;
    flex-direction: column;
}

.circles-loading[b-hp82rut75y] {
    text-align: center;
    color: #888;
    padding: 3rem 0;
}

.circles-empty[b-hp82rut75y] {
    text-align: center;
    color: #888;
    padding: 3rem 0;
    font-size: 1rem;
}
/* /Pages/ContentPerformancePage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Content Performance Page — scoped styles
   AI content strategy dashboard: engagement metrics,
   A/B experiments, strategy evolution.
   Follows Finance page visual language.
   ═══════════════════════════════════════════════════════════ */

/* ── Layout ── */

.perf-container[b-q2iz2amy08] {
    background-color: #f5f5f5;
    min-height: 100vh;
    margin-left: 72px;
}

.perf-content[b-q2iz2amy08] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Page Header ── */

.perf-page-header[b-q2iz2amy08] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.perf-page-header-left[b-q2iz2amy08] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.perf-page-title[b-q2iz2amy08] {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.02em;
}

.perf-page-subtitle[b-q2iz2amy08] {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

.perf-page-header-right[b-q2iz2amy08] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.perf-refresh-badge[b-q2iz2amy08] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
}

/* ── Section Headings ── */

.perf-section-heading[b-q2iz2amy08] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.perf-section-heading h2[b-q2iz2amy08] {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    letter-spacing: -0.01em;
}

.perf-strategy-updated[b-q2iz2amy08] {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 400;
}

/* ── KPI Grid (4 cards) ── */

.perf-kpi-grid[b-q2iz2amy08] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.perf-kpi-card[b-q2iz2amy08] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-left: 3px solid #e2e8f0;
    transition: box-shadow 0.2s;
}

.perf-kpi-card:hover[b-q2iz2amy08] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.perf-kpi-card.accent-blue[b-q2iz2amy08]   { border-left-color: #3b82f6; }
.perf-kpi-card.accent-green[b-q2iz2amy08]  { border-left-color: #22c55e; }
.perf-kpi-card.accent-teal[b-q2iz2amy08]   { border-left-color: #14b8a6; }
.perf-kpi-card.accent-purple[b-q2iz2amy08] { border-left-color: #a855f7; }

.perf-kpi-label[b-q2iz2amy08] {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.perf-kpi-value[b-q2iz2amy08] {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.perf-kpi-value-sm[b-q2iz2amy08] {
    font-size: 16px;
}

/* ── Content Cards ── */

.perf-card[b-q2iz2amy08] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.perf-card-header[b-q2iz2amy08] {
    padding: 14px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafafa;
}

.perf-card-title[b-q2iz2amy08] {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.perf-card-body[b-q2iz2amy08] {
    padding: 20px;
}

.perf-card-body-flush[b-q2iz2amy08] {
    padding: 0;
}

/* ── Table ── */

.perf-table[b-q2iz2amy08] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #334155;
}

.perf-table thead th[b-q2iz2amy08] {
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #fafafa;
    border-bottom: 1px solid #f1f5f9;
    white-space: nowrap;
}

.perf-table tbody tr[b-q2iz2amy08] {
    border-bottom: 1px solid #f8fafc;
    transition: background 0.12s;
}

.perf-table tbody tr:hover[b-q2iz2amy08] {
    background: #f8fafc;
}

.perf-table tbody td[b-q2iz2amy08] {
    padding: 10px 14px;
    vertical-align: middle;
}

.perf-table-thumb[b-q2iz2amy08] {
    width: 42px;
}

.perf-thumb[b-q2iz2amy08] {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.perf-thumb-placeholder[b-q2iz2amy08] {
    width: 36px;
    height: 36px;
    background: #f1f5f9;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 14px;
}

.perf-table-date[b-q2iz2amy08] {
    color: #64748b;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.perf-table-empty[b-q2iz2amy08] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 28px 20px;
    color: #94a3b8;
    font-size: 14px;
}

.perf-table-empty i[b-q2iz2amy08] {
    font-size: 20px;
}

/* ── Platform Badge ── */

.perf-platform-badge[b-q2iz2amy08] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    background: #f1f5f9;
    color: #475569;
    white-space: nowrap;
}

.perf-platform-instagram[b-q2iz2amy08] { background: #fdf2f8; color: #9d174d; }
.perf-platform-tiktok[b-q2iz2amy08]    { background: #f0fdf4; color: #065f46; }
.perf-platform-facebook[b-q2iz2amy08]  { background: #eff6ff; color: #1d4ed8; }

/* ── Engagement Rate Color Coding ── */

.perf-engagement-rate[b-q2iz2amy08] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.perf-engagement-high[b-q2iz2amy08]   { color: #16a34a; }
.perf-engagement-medium[b-q2iz2amy08] { color: #d97706; }
.perf-engagement-low[b-q2iz2amy08]    { color: #94a3b8; }

/* ── A/B Experiment Cards ── */

.perf-experiments-grid[b-q2iz2amy08] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.perf-experiment-card[b-q2iz2amy08] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.perf-experiment-header[b-q2iz2amy08] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fafafa;
    border-bottom: 1px solid #f1f5f9;
    gap: 8px;
    flex-wrap: wrap;
}

.perf-experiment-dimension[b-q2iz2amy08] {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.perf-experiment-date[b-q2iz2amy08] {
    font-size: 11px;
    color: #94a3b8;
}

.perf-experiment-variants[b-q2iz2amy08] {
    display: flex;
    align-items: stretch;
    padding: 16px;
    gap: 12px;
}

.perf-variant-vs[b-q2iz2amy08] {
    display: flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    flex-shrink: 0;
}

.perf-variant[b-q2iz2amy08] {
    flex: 1;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1.5px solid #e2e8f0;
}

.perf-variant.variant-winner[b-q2iz2amy08] {
    border-color: #86efac;
    background: #f0fdf4;
}

.perf-variant.variant-loser[b-q2iz2amy08] {
    border-color: #fca5a5;
    background: #fef2f2;
}

.perf-variant.variant-inconclusive[b-q2iz2amy08] {
    border-color: #e2e8f0;
    background: #f8fafc;
}

.perf-variant-label[b-q2iz2amy08] {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.perf-variant-value[b-q2iz2amy08] {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

.perf-variant-rate[b-q2iz2amy08] {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.variant-winner .perf-variant-rate[b-q2iz2amy08] { color: #15803d; }
.variant-loser  .perf-variant-rate[b-q2iz2amy08] { color: #dc2626; }

.perf-variant-margin[b-q2iz2amy08] {
    font-size: 11px;
    font-weight: 600;
    color: #15803d;
    background: #dcfce7;
    border-radius: 20px;
    padding: 2px 8px;
    display: inline-block;
    margin-top: 4px;
}

.perf-experiment-status[b-q2iz2amy08] {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 500;
    border-top: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 6px;
}

.perf-status-inconclusive[b-q2iz2amy08] {
    color: #64748b;
    background: #f8fafc;
}

/* ── Strategy Cards ── */

.perf-strategy-grid[b-q2iz2amy08] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.perf-strategy-card[b-q2iz2amy08] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.perf-strategy-card-header[b-q2iz2amy08] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fafafa;
    border-bottom: 1px solid #f1f5f9;
}

.perf-strategy-card-header i[b-q2iz2amy08] {
    color: #14b8a6;
    font-size: 15px;
}

.perf-strategy-card-header h3[b-q2iz2amy08] {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.perf-strategy-card-body[b-q2iz2amy08] {
    padding: 14px 16px;
}

.perf-strategy-list[b-q2iz2amy08] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.perf-strategy-list li[b-q2iz2amy08] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #334155;
    flex-wrap: wrap;
}

.perf-strategy-rank[b-q2iz2amy08] {
    font-weight: 700;
    color: #94a3b8;
    min-width: 24px;
    font-size: 12px;
}

.perf-strategy-item-platform[b-q2iz2amy08] {
    background: #f1f5f9;
    color: #475569;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.perf-strategy-item-time[b-q2iz2amy08] {
    font-weight: 600;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.perf-strategy-item-rate[b-q2iz2amy08] {
    margin-left: auto;
    font-weight: 700;
    color: #14b8a6;
    font-variant-numeric: tabular-nums;
}

.perf-strategy-item-name[b-q2iz2amy08] {
    font-weight: 600;
    color: #1e293b;
    flex: 1;
}

.perf-strategy-item-count[b-q2iz2amy08] {
    font-size: 11px;
    color: #94a3b8;
}

.perf-strategy-avoid-list[b-q2iz2amy08] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.perf-strategy-avoid-list li[b-q2iz2amy08] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #334155;
    line-height: 1.4;
}

.perf-strategy-avoid-list i[b-q2iz2amy08] {
    color: #ef4444;
    margin-top: 2px;
    flex-shrink: 0;
}

.perf-strategy-empty[b-q2iz2amy08] {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
    font-style: italic;
}

/* ── AI Learnings ── */

.perf-learnings-list[b-q2iz2amy08] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.perf-learnings-list li[b-q2iz2amy08] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #334155;
    line-height: 1.5;
}

.perf-learnings-list i[b-q2iz2amy08] {
    color: #f59e0b;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ── Empty State ── */

.perf-empty-state[b-q2iz2amy08] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    gap: 12px;
}

.perf-empty-icon[b-q2iz2amy08] {
    opacity: 0.6;
    margin-bottom: 4px;
}

.perf-empty-title[b-q2iz2amy08] {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    letter-spacing: -0.02em;
}

.perf-empty-desc[b-q2iz2amy08] {
    font-size: 14px;
    color: #64748b;
    margin: 0;
    max-width: 420px;
    line-height: 1.6;
}

/* ── Loading Skeleton ── */

.perf-kpi-card.skeleton[b-q2iz2amy08] {
    pointer-events: none;
}

.perf-skeleton-label[b-q2iz2amy08] {
    height: 11px;
    width: 60%;
    border-radius: 4px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: perfShimmer-b-q2iz2amy08 1.5s infinite;
}

.perf-skeleton-value[b-q2iz2amy08] {
    height: 28px;
    width: 80%;
    border-radius: 6px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: perfShimmer-b-q2iz2amy08 1.5s infinite;
    margin-top: 8px;
}

.skeleton-section[b-q2iz2amy08] {
    pointer-events: none;
}

.perf-skeleton-full[b-q2iz2amy08] {
    height: 180px;
    border-radius: 8px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: perfShimmer-b-q2iz2amy08 1.5s infinite;
}

@keyframes perfShimmer-b-q2iz2amy08 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════
   Responsive breakpoints
   ══════════════════════════════════════ */

/* Tablet: 2-column KPI */
@media (max-width: 900px) {
    .perf-kpi-grid[b-q2iz2amy08] {
        grid-template-columns: repeat(2, 1fr);
    }

    .perf-experiments-grid[b-q2iz2amy08] {
        grid-template-columns: 1fr;
    }

    .perf-strategy-grid[b-q2iz2amy08] {
        grid-template-columns: 1fr;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .perf-container[b-q2iz2amy08] {
        margin-left: 0;
    }

    .perf-content[b-q2iz2amy08] {
        padding: 16px;
        gap: 14px;
    }

    .perf-kpi-grid[b-q2iz2amy08] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .perf-kpi-value[b-q2iz2amy08] {
        font-size: 18px;
    }

    .perf-page-header[b-q2iz2amy08] {
        flex-direction: column;
        align-items: flex-start;
    }

    .perf-experiment-variants[b-q2iz2amy08] {
        flex-direction: column;
        gap: 8px;
    }

    .perf-variant-vs[b-q2iz2amy08] {
        justify-content: center;
    }
}

/* Extra narrow */
@media (max-width: 400px) {
    .perf-kpi-grid[b-q2iz2amy08] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/DynamicHub.razor.rz.scp.css */
/* === Base Container === */
.hub-container[b-b3604fgmm8] {
    background-color: #f5f5f5;
    min-height: 100vh;
    margin-left: 72px;
}

.hub-container.no-sidebar[b-b3604fgmm8] {
    margin-left: 0 !important;
}

.hub-content[b-b3604fgmm8] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* === Page Header === */
.page-header[b-b3604fgmm8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.page-header-left h1[b-b3604fgmm8] {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 4px 0;
}

.page-header-right[b-b3604fgmm8] {
    display: flex;
    align-items: center;
}

.logout-button[b-b3604fgmm8] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background-color: transparent;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.logout-button:hover[b-b3604fgmm8] {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.logout-icon[b-b3604fgmm8] {
    font-size: 16px;
}

.page-header-left p[b-b3604fgmm8] {
    font-size: 13px;
    color: #666;
    margin: 0;
}

.page-header-right[b-b3604fgmm8] {
    display: flex;
    gap: 8px;
}

/* === Buttons === */
.btn-action[b-b3604fgmm8] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-action:hover[b-b3604fgmm8] {
    border-color: #1976d2;
    color: #1976d2;
}

.btn-action:disabled[b-b3604fgmm8] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-action.primary[b-b3604fgmm8] {
    background: #1976d2;
    border-color: #1976d2;
    color: #fff;
}

.btn-action.primary:hover[b-b3604fgmm8] {
    background: #1565c0;
}

/* === Connection Warning === */
.connection-warning[b-b3604fgmm8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    font-size: 13px;
    color: #f57c00;
}

.connection-warning i[b-b3604fgmm8] {
    font-size: 14px;
}

/* === Loading & Empty States === */
.loading-state[b-b3604fgmm8],
.empty-state[b-b3604fgmm8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    color: #666;
    gap: 12px;
}

.loading-state i[b-b3604fgmm8],
.empty-state i[b-b3604fgmm8] {
    font-size: 24px;
    color: #999;
}

.empty-state p[b-b3604fgmm8] {
    margin: 0;
    font-size: 14px;
}

/* === Ideas Card Container === */
.ideas-card[b-b3604fgmm8] {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    padding: 20px;
}

.ideas-header[b-b3604fgmm8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.ideas-header-text[b-b3604fgmm8] {
    gap: 4px;
}

.ideas-header-text h3.ideas-title[b-b3604fgmm8] {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.ideas-header-text p.ideas-subtitle[b-b3604fgmm8] {
    font-size: 13px;
    color: #666;
    margin: 0;
}

.ideas-header-actions[b-b3604fgmm8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.refresh-ideas-btn[b-b3604fgmm8],
.session-feedback-btn[b-b3604fgmm8] {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    border-radius: 50%;
    transition: all 0.2s;
}

.refresh-ideas-btn:hover[b-b3604fgmm8],
.session-feedback-btn:hover[b-b3604fgmm8] {
    background: #e3f2fd;
    color: #1976d2;
    border-color: #1976d2;
}

.refresh-ideas-btn:disabled[b-b3604fgmm8] {
    opacity: 0.5;
    cursor: not-allowed;
}

.session-feedback-btn[b-b3604fgmm8] {
    color: #1976d2;
    border-color: #1976d2;
    background: #f5f9ff;
}

/* === Custom Idea Accordion === */
.custom-idea-accordion[b-b3604fgmm8] {
    border-top: 1px solid #e0e0e0;
    padding-top: 16px;
    margin-top: 8px;
}

.accordion-toggle[b-b3604fgmm8] {
    background: none;
    border: none;
    color: #555;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 10px 16px;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.accordion-toggle:hover[b-b3604fgmm8] {
    background-color: #f5f5f5;
    color: #1976d2;
}

.accordion-toggle:focus[b-b3604fgmm8],
.accordion-toggle:focus-visible[b-b3604fgmm8] {
    outline: none !important;
    background-color: #f0f7ff;
    color: #1976d2;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}

.custom-idea-content[b-b3604fgmm8] {
    margin-top: 16px;
    padding: 0 16px;
    animation: slideDown-b-b3604fgmm8 0.2s ease;
}

@keyframes slideDown-b-b3604fgmm8 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-b3604fgmm8] .custom-idea-textarea {
    width: 100%;
    margin-bottom: 12px;
}

[b-b3604fgmm8] .primary-action-btn {
    background-image: none !important;
    background-color: #1976d2 !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(25, 118, 210, 0.2);
    transition: all 0.2s ease;
}

[b-b3604fgmm8] .primary-action-btn:hover {
    background-color: #1565c0 !important;
    box-shadow: 0 4px 8px rgba(25, 118, 210, 0.3);
    transform: translateY(-1px);
}

[b-b3604fgmm8] .custom-idea-textarea textarea {
    font-size: 14px;
    min-height: 80px;
    border: 2px solid #e0e0e0 !important;
    background: #fafafa !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    transition: border-color 0.2s, background-color 0.2s;
}

[b-b3604fgmm8] .custom-idea-textarea textarea:focus {
    background: #fff !important;
    border-color: #1976d2 !important;
}

[b-b3604fgmm8] .generate-btn {
    margin-top: 12px !important;
}

/* === Generation Loading State === */
.generation-loading[b-b3604fgmm8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.generation-loading .loading-icon[b-b3604fgmm8] {
    color: #FFC107;
    margin-bottom: 20px;
    animation: pulse-b-b3604fgmm8 1.5s ease-in-out infinite;
}

@keyframes pulse-b-b3604fgmm8 {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.generation-loading h3[b-b3604fgmm8] {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
}

.generation-loading .loading-step[b-b3604fgmm8] {
    font-size: 14px;
    color: #333;
    margin: 0 0 20px 0;
}

.generation-loading .progress-bar[b-b3604fgmm8] {
    width: 100%;
    max-width: 400px;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
}

.generation-loading .progress-fill[b-b3604fgmm8] {
    height: 100%;
    background-image: none !important;
    background-color: #1976d2 !important;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.generation-loading .loading-time[b-b3604fgmm8] {
    font-size: 12px;
    color: #999;
    margin: 0;
}

/* === Editor Header === */
.editor-header[b-b3604fgmm8] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e0e0e0;
}

.back-btn[b-b3604fgmm8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: none;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.back-btn:hover[b-b3604fgmm8] {
    border-color: #1976d2;
    color: #1976d2;
    background: #f5f5f5;
}

.back-btn i[b-b3604fgmm8] {
    font-size: 12px;
}

/* === Content Grid === */
.content-grid[b-b3604fgmm8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Marketplace grid - single column full width */
.content-grid.marketplace-grid[b-b3604fgmm8] {
    grid-template-columns: 1fr;
}

/* Marketplace loading state - simplified since it's already inside ideas-card */
.loading-state.marketplace-loading[b-b3604fgmm8] {
    background: transparent;
    border: none;
    padding: 40px 20px;
}

/* === Hub Sections (Scheduled Posts, Analytics) === */
.hub-section[b-b3604fgmm8] {
    margin-top: 32px;
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.section-header[b-b3604fgmm8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-header-left[b-b3604fgmm8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-icon[b-b3604fgmm8] {
    font-size: 24px;
    color: #1976d2;
}

.section-title[b-b3604fgmm8] {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 4px 0;
}

.section-subtitle[b-b3604fgmm8] {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.section-action-btn[b-b3604fgmm8] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

.section-action-btn:hover[b-b3604fgmm8] {
    background: #f5f5f5;
    border-color: #1976d2;
    color: #1976d2;
}

.section-action-btn i[b-b3604fgmm8] {
    font-size: 12px;
}

/* === Responsive === */
@media (max-width: 1200px) {
    .content-grid[b-b3604fgmm8] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hub-container[b-b3604fgmm8] {
        margin-left: 0;
    }

    .hub-content[b-b3604fgmm8] {
        padding: 16px;
    }

    .page-header[b-b3604fgmm8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .page-header-right[b-b3604fgmm8] {
        width: 100%;
    }

    .btn-action[b-b3604fgmm8] {
        flex: 1;
        justify-content: center;
    }

    .content-grid[b-b3604fgmm8] {
        grid-template-columns: 1fr;
    }
}

/* === Connections Button === */
.connections-btn[b-b3604fgmm8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

.connections-btn:hover[b-b3604fgmm8] {
    border-color: #1976d2;
    color: #1976d2;
}

.connections-btn i[b-b3604fgmm8] {
    color: #1976d2;
}

.connection-count[b-b3604fgmm8] {
    background: #1976d2;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
}

/* === Modal Base Styles === */
.modal-overlay[b-b3604fgmm8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-b3604fgmm8] {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    max-width: 480px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.modal-header[b-b3604fgmm8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.modal-header h3[b-b3604fgmm8] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.modal-close[b-b3604fgmm8] {
    background: none;
    border: none;
    font-size: 18px;
    color: #666;
    cursor: pointer;
    padding: 4px;
}

.modal-close:hover[b-b3604fgmm8] {
    color: #333;
}

.modal-body[b-b3604fgmm8] {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-b3604fgmm8] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
}

/* === Connections Modal === */
.connections-modal[b-b3604fgmm8] {
    max-width: 520px;
}

.connections-modal-list[b-b3604fgmm8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.connection-row[b-b3604fgmm8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.connection-row-left[b-b3604fgmm8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.connection-row-right[b-b3604fgmm8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.connection-icon[b-b3604fgmm8] {
    font-size: 24px;
}

.connection-icon.facebook[b-b3604fgmm8] {
    color: #4267B2;
}

.connection-icon.instagram[b-b3604fgmm8] {
    color: #E4405F;
}

.connection-icon.tiktok[b-b3604fgmm8] {
    color: #000;
}

.connection-details[b-b3604fgmm8] {
    display: flex;
    flex-direction: column;
}

.connection-name[b-b3604fgmm8] {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.connection-status[b-b3604fgmm8] {
    font-size: 11px;
}

.connection-status.active[b-b3604fgmm8] {
    color: #2e7d32;
}

.connection-status.pending[b-b3604fgmm8] {
    color: #f57f17;
}

.loading-connections[b-b3604fgmm8] {
    color: #666;
    font-size: 13px;
    padding: 8px 0;
}

.connection-hint-text[b-b3604fgmm8] {
    font-size: 11px;
    color: #666;
}

.connection-hint-text i[b-b3604fgmm8] {
    color: #f57f17;
    margin-right: 4px;
}

/* === Small Button Styles === */
.btn-sm[b-b3604fgmm8] {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-outline[b-b3604fgmm8] {
    background: transparent;
    border: 1px solid #1976d2;
    color: #1976d2;
}

.btn-outline:hover[b-b3604fgmm8] {
    background: #e3f2fd;
}

.btn-danger-outline[b-b3604fgmm8] {
    background: transparent;
    border: 1px solid #d32f2f;
    color: #d32f2f;
}

.btn-danger-outline:hover[b-b3604fgmm8] {
    background: #ffebee;
}

.btn-connect[b-b3604fgmm8] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    color: #fff;
    transition: all 0.2s;
}

.btn-connect.facebook[b-b3604fgmm8] {
    background: #4267B2;
}

.btn-connect.facebook:hover[b-b3604fgmm8] {
    background: #365899;
}

.btn-connect.instagram[b-b3604fgmm8] {
    background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
}

.btn-connect.instagram:hover[b-b3604fgmm8] {
    opacity: 0.9;
}

.btn-disabled[b-b3604fgmm8] {
    padding: 6px 12px;
    background: #e0e0e0;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    color: #999;
    cursor: not-allowed;
}

.btn-primary[b-b3604fgmm8], .btn-secondary[b-b3604fgmm8] {
    padding: 8px 20px;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
    border: none;
    font-size: 13px;
}

.btn-primary[b-b3604fgmm8] {
    background: #1976d2;
    color: #fff;
}

.btn-primary:hover[b-b3604fgmm8] {
    background: #1565c0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-secondary[b-b3604fgmm8] {
    background: #f5f5f5;
    color: #666;
    border: 1px solid #e0e0e0;
}

.btn-secondary:hover[b-b3604fgmm8] {
    background: #e0e0e0;
}

/* === Page Selection Modal === */
.page-selection-modal[b-b3604fgmm8] {
    max-width: 480px;
}

.loading-pages[b-b3604fgmm8], .no-pages[b-b3604fgmm8] {
    text-align: center;
    padding: 32px;
    color: #666;
}

.no-pages i[b-b3604fgmm8] {
    font-size: 36px;
    color: #f57f17;
    margin-bottom: 12px;
}

.pages-list[b-b3604fgmm8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-item[b-b3604fgmm8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.page-item:hover[b-b3604fgmm8] {
    border-color: #1976d2;
    background: #f8f9fa;
}

.page-item.selected[b-b3604fgmm8] {
    border-color: #1976d2;
    background: #e3f2fd;
}

.page-info[b-b3604fgmm8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-icon[b-b3604fgmm8] {
    font-size: 28px;
    color: #4267B2;
}

.page-details[b-b3604fgmm8] {
    display: flex;
    flex-direction: column;
}

.page-name[b-b3604fgmm8] {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.page-instagram[b-b3604fgmm8] {
    font-size: 12px;
    color: #E4405F;
    margin-top: 2px;
}

.selected-icon[b-b3604fgmm8] {
    font-size: 20px;
    color: #1976d2;
}

/* === Notifications Section === */
.notifications-section[b-b3604fgmm8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
}

.notification-card[b-b3604fgmm8] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    animation: slideIn-b-b3604fgmm8 0.3s ease-out;
}

@keyframes slideIn-b-b3604fgmm8 {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.notification-icon[b-b3604fgmm8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    font-size: 20px;
}

.notification-content[b-b3604fgmm8] {
    flex: 1;
}

.notification-title[b-b3604fgmm8] {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
}

.notification-message[b-b3604fgmm8] {
    margin: 0;
    font-size: 14px;
    opacity: 0.9;
}

.notification-dismiss[b-b3604fgmm8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
}

.notification-dismiss:hover[b-b3604fgmm8] {
    background: rgba(255, 255, 255, 0.3);
}

/* === Bot Trigger Button === */
.bot-trigger-btn[b-b3604fgmm8] {
    background: none;
    border: 1px solid #e0e0e0;
    color: #666;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bot-trigger-btn:hover:not(:disabled)[b-b3604fgmm8] {
    background: #e3f2fd;
    color: #1976d2;
    border-color: #1976d2;
}

.bot-trigger-btn:disabled[b-b3604fgmm8] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === Undo Toast === */
.undo-toast[b-b3604fgmm8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #323232;
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    margin: 8px 0;
    animation: slideIn-b-b3604fgmm8 0.2s ease-out;
}

.undo-toast-content[b-b3604fgmm8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.undo-toast-icon[b-b3604fgmm8] {
    color: #ff6b6b;
}

.undo-toast-btn[b-b3604fgmm8] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #64b5f6;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s;
}

.undo-toast-btn:hover[b-b3604fgmm8] {
    background: rgba(255, 255, 255, 0.1);
}

/* === Trigger Result Toast === */
.trigger-result-toast[b-b3604fgmm8] {
    background: #1b5e20;
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    margin: 8px 0;
    text-align: center;
    animation: slideIn-b-b3604fgmm8 0.2s ease-out;
}
/* /Pages/ExceptionQueuePage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Exception Queue Page — scoped styles (eq- prefix)
   Cross-tenant exception queue for operator review of
   flagged and held social media posts.
   ═══════════════════════════════════════════════════════════ */

/* ── Layout ── */

.eq-container[b-aaksbo0zav] {
    background-color: #f5f5f5;
    min-height: 100vh;
    margin-left: 72px;
}

.eq-content[b-aaksbo0zav] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Page Header ── */

.eq-page-header[b-aaksbo0zav] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.eq-page-header-left[b-aaksbo0zav] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.eq-page-title[b-aaksbo0zav] {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.02em;
}

.eq-page-subtitle[b-aaksbo0zav] {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

.eq-page-header-right[b-aaksbo0zav] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eq-refresh-badge[b-aaksbo0zav] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #e0f2fe;
    color: #0369a1;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

/* ── Skeleton Loading ── */

.eq-skeleton-grid[b-aaksbo0zav] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.eq-card.skeleton[b-aaksbo0zav] {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.eq-skeleton-header[b-aaksbo0zav] {
    height: 24px;
    background: #e2e8f0;
    border-radius: 4px;
    width: 40%;
    animation: eq-pulse-b-aaksbo0zav 1.5s infinite;
}

.eq-skeleton-line[b-aaksbo0zav] {
    height: 16px;
    background: #e2e8f0;
    border-radius: 4px;
    animation: eq-pulse-b-aaksbo0zav 1.5s infinite;
}

.eq-skeleton-line-short[b-aaksbo0zav] {
    width: 60%;
}

@keyframes eq-pulse-b-aaksbo0zav {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

/* ── Empty State ── */

.eq-empty-state[b-aaksbo0zav] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 24px;
    text-align: center;
}

.eq-empty-title[b-aaksbo0zav] {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.eq-empty-desc[b-aaksbo0zav] {
    font-size: 14px;
    color: #64748b;
    margin: 0;
    max-width: 420px;
}

/* ── Tenant Section ── */

.eq-tenant-section[b-aaksbo0zav] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.eq-tenant-header[b-aaksbo0zav] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 2px solid #e2e8f0;
}

.eq-tenant-badge[b-aaksbo0zav] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: #1e293b;
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.eq-tenant-count[b-aaksbo0zav] {
    font-size: 12px;
    color: #64748b;
}

/* ── Items Grid ── */

.eq-items-grid[b-aaksbo0zav] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Item Card ── */

.eq-item-card[b-aaksbo0zav] {
    background: #fff;
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.15s ease;
}

.eq-item-card:hover[b-aaksbo0zav] {
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

/* ── Card Header ── */

.eq-card-header[b-aaksbo0zav] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.eq-badges-row[b-aaksbo0zav] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── Confidence Badge ── */

.eq-confidence-badge[b-aaksbo0zav] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    min-width: 44px;
    justify-content: center;
}

.eq-badge-red[b-aaksbo0zav]    { background: #ef4444; }
.eq-badge-amber[b-aaksbo0zav]  { background: #f59e0b; }
.eq-badge-green[b-aaksbo0zav]  { background: #22c55e; }

/* ── Status Badge ── */

.eq-status-badge[b-aaksbo0zav] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.eq-status-flagged[b-aaksbo0zav] {
    background: #fee2e2;
    color: #b91c1c;
}

.eq-status-waiting[b-aaksbo0zav] {
    background: #fef3c7;
    color: #92400e;
}

/* ── Platform Badge ── */

.eq-platform-badge[b-aaksbo0zav] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
}

.eq-platform-instagram[b-aaksbo0zav] { background: #fce7f3; color: #9d174d; }
.eq-platform-facebook[b-aaksbo0zav]  { background: #dbeafe; color: #1d4ed8; }
.eq-platform-tiktok[b-aaksbo0zav]    { background: #f0fdf4; color: #166534; }

/* ── Scheduled Time ── */

.eq-scheduled-time[b-aaksbo0zav] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #64748b;
}

/* ── Flag Reasons ── */

.eq-flag-reasons[b-aaksbo0zav] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: #fef9c3;
    border-radius: 6px;
    border-left: 3px solid #f59e0b;
}

.eq-flags-row[b-aaksbo0zav] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.eq-flag-tag[b-aaksbo0zav] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #fde68a;
    color: #78350f;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.eq-dimensions-row[b-aaksbo0zav] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.eq-dimension-label[b-aaksbo0zav] {
    font-size: 11px;
    color: #92400e;
}

/* ── Post Preview ── */

.eq-post-preview[b-aaksbo0zav] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.eq-product-name[b-aaksbo0zav] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #475569;
}

.eq-caption[b-aaksbo0zav] {
    font-size: 14px;
    color: #1e293b;
    line-height: 1.5;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.eq-image-prompt[b-aaksbo0zav] {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    flex-wrap: wrap;
}

.eq-image-prompt-label[b-aaksbo0zav] {
    font-weight: 600;
    color: #475569;
    flex-shrink: 0;
}

.eq-image-prompt-text[b-aaksbo0zav] {
    font-style: italic;
}

.eq-image-thumb-wrap[b-aaksbo0zav] {
    margin-top: 4px;
}

.eq-image-thumb[b-aaksbo0zav] {
    max-width: 140px;
    max-height: 140px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #e2e8f0;
}

/* ── Inline Edit ── */

.eq-edit-mode[b-aaksbo0zav] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.eq-edit-label[b-aaksbo0zav] {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.eq-edit-textarea[b-aaksbo0zav] {
    width: 100%;
    min-height: 96px;
    padding: 10px 12px;
    border: 1.5px solid #94a3b8;
    border-radius: 6px;
    font-size: 14px;
    color: #1e293b;
    resize: vertical;
    box-sizing: border-box;
    background: #fff;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.15s;
}

.eq-edit-textarea:focus[b-aaksbo0zav] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

.eq-edit-actions[b-aaksbo0zav] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Action Buttons ── */

.eq-actions[b-aaksbo0zav] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid #f1f5f9;
}

.eq-btn[b-aaksbo0zav] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
    background: transparent;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.eq-btn-approve[b-aaksbo0zav] {
    color: #15803d;
    border-color: #16a34a;
}

.eq-btn-approve:hover[b-aaksbo0zav] {
    background: #f0fdf4;
    color: #14532d;
    border-color: #14532d;
}

.eq-btn-reject[b-aaksbo0zav] {
    color: #b91c1c;
    border-color: #dc2626;
}

.eq-btn-reject:hover[b-aaksbo0zav] {
    background: #fef2f2;
    color: #991b1b;
    border-color: #991b1b;
}

.eq-btn-edit[b-aaksbo0zav] {
    color: #1d4ed8;
    border-color: #3b82f6;
}

.eq-btn-edit:hover[b-aaksbo0zav] {
    background: #eff6ff;
    color: #1e40af;
    border-color: #1e40af;
}

.eq-btn-save[b-aaksbo0zav] {
    color: #fff;
    background: #16a34a;
    border-color: #16a34a;
}

.eq-btn-save:hover[b-aaksbo0zav] {
    background: #15803d;
    border-color: #15803d;
}

.eq-btn-cancel[b-aaksbo0zav] {
    color: #64748b;
    border-color: #94a3b8;
}

.eq-btn-cancel:hover[b-aaksbo0zav] {
    background: #f1f5f9;
    color: #475569;
}

/* ── Responsive ── */

@media (max-width: 640px) {
    .eq-container[b-aaksbo0zav] {
        margin-left: 0;
    }

    .eq-content[b-aaksbo0zav] {
        padding: 16px 12px;
    }

    .eq-card-header[b-aaksbo0zav] {
        flex-direction: column;
    }

    .eq-actions[b-aaksbo0zav] {
        flex-direction: column;
    }

    .eq-btn[b-aaksbo0zav] {
        justify-content: center;
    }
}
/* /Pages/Finance.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Finance Page — scoped styles
   Full-page financial dashboard aesthetic:
   data-forward, editorial typography, subtle depth.
   Matches PaymentAdminPage layout pattern + fin-card visual language.
   ═══════════════════════════════════════════════════════════ */

.finance-imported-badge[b-zufkg2ayrl] {
    display: inline-block;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.finance-header-actions[b-zufkg2ayrl] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Year Picker ── */

.finance-year-select[b-zufkg2ayrl] {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    background: #fff;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-width: 200px;
}

.finance-year-select:focus[b-zufkg2ayrl] {
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
}

.finance-year-select:disabled[b-zufkg2ayrl] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Upload Button (header compact) ── */

.finance-upload-btn[b-zufkg2ayrl] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: #0f766e;
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, opacity 0.2s;
    letter-spacing: 0.01em;
    white-space: nowrap;
    user-select: none;
}

.finance-upload-btn:hover:not(.uploading)[b-zufkg2ayrl] {
    background: #0d9488;
    transform: translateY(-1px);
}

.finance-upload-btn:active[b-zufkg2ayrl] {
    transform: translateY(0);
}

.finance-upload-btn.uploading[b-zufkg2ayrl] {
    opacity: 0.7;
    cursor: wait;
}

.finance-upload-btn[b-zufkg2ayrl]  input[type="file"] {
    display: none;
}

@keyframes finFadeSlideIn-b-zufkg2ayrl {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Tab Bar ── */

.finance-tab-bar[b-zufkg2ayrl] {
    display: flex;
    gap: 2px;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 0;
}

.finance-tab-btn[b-zufkg2ayrl] {
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.finance-tab-btn:hover[b-zufkg2ayrl] {
    color: #334155;
}

.finance-tab-btn.active[b-zufkg2ayrl] {
    background: #fff;
    color: #0f172a;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ── KPI Grid (4 cards) ── */

.finance-kpi-grid[b-zufkg2ayrl] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.finance-kpi-card[b-zufkg2ayrl] {
    position: relative;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-left: 3px solid #e2e8f0;
    transition: box-shadow 0.2s;
}

.finance-kpi-card:hover[b-zufkg2ayrl] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.finance-kpi-card.accent-green[b-zufkg2ayrl]  { border-left-color: #22c55e; }
.finance-kpi-card.accent-teal[b-zufkg2ayrl]   { border-left-color: #14b8a6; }
.finance-kpi-card.accent-red[b-zufkg2ayrl]    { border-left-color: #ef4444; }
.finance-kpi-card.accent-blue[b-zufkg2ayrl]   { border-left-color: #3b82f6; }

.finance-kpi-label[b-zufkg2ayrl] {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}


.finance-kpi-value[b-zufkg2ayrl] {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.finance-kpi-value.accent[b-zufkg2ayrl] {
    color: #0f766e;
}

.finance-kpi-value.positive[b-zufkg2ayrl] {
    color: #15803d;
}

.finance-kpi-value.negative[b-zufkg2ayrl] {
    color: #dc2626;
}

.finance-kpi-sub[b-zufkg2ayrl] {
    font-size: 11px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.finance-kpi-delta[b-zufkg2ayrl] {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
}

.finance-kpi-delta.up[b-zufkg2ayrl]::before   { content: "\2191 "; color: #22c55e; }
.finance-kpi-delta.down[b-zufkg2ayrl]::before { content: "\2193 "; color: #ef4444; }

.finance-kpi-period[b-zufkg2ayrl] {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 400;
    margin-left: 0.25rem;
}

/* ── Clickable KPI Card ── */

.finance-kpi-card-clickable[b-zufkg2ayrl] {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.finance-kpi-card-clickable:hover[b-zufkg2ayrl] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.finance-kpi-card-clickable:active[b-zufkg2ayrl] {
    transform: translateY(0);
}

/* ── Content Cards ── */

.finance-card[b-zufkg2ayrl] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.finance-card-header[b-zufkg2ayrl] {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafafa;
}

.finance-card-title[b-zufkg2ayrl] {
    font-size: 14px;
    font-weight: 700;
    color: #334155;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.finance-card-body[b-zufkg2ayrl] {
    padding: 20px;
}

/* ── Monthly Chart ── */

.finance-chart-wrapper[b-zufkg2ayrl] {
    position: relative;
}

.finance-chart-avg-line[b-zufkg2ayrl] {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1.5px dashed #94a3b8;
    z-index: 2;
    pointer-events: none;
}

.finance-chart-avg-line[b-zufkg2ayrl]::after {
    display: none;
}

.finance-chart-avg-label[b-zufkg2ayrl] {
    position: absolute;
    right: 4px;
    top: -10px;
    font-size: 10px;
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.9);
    padding: 1px 6px;
    border-radius: 3px;
}

.finance-chart[b-zufkg2ayrl] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 160px;
    padding: 0 0.25rem;
}

.finance-chart-col[b-zufkg2ayrl] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
}

/* Single stacked bar: teal profit on top, expense categories below */
.finance-chart-bar[b-zufkg2ayrl] {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    padding: 0 4px;
    margin-top: auto;
}

.finance-segment[b-zufkg2ayrl] {
    width: 100%;
    min-height: 1px;
    transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.2s;
    cursor: default;
}

.finance-segment:hover[b-zufkg2ayrl] {
    filter: brightness(1.12);
}

/* Segment colors */
.finance-segment.seg-profit[b-zufkg2ayrl]        { background: linear-gradient(180deg, #5eead4, #14b8a6); }
.finance-segment.seg-varuinkop[b-zufkg2ayrl]     { background: #fdba74; }
.finance-segment.seg-personal[b-zufkg2ayrl]      { background: #a5b4fc; }
.finance-segment.seg-lokal[b-zufkg2ayrl]         { background: #c4b5fd; }
.finance-segment.seg-ovriga[b-zufkg2ayrl]        { background: #f9a8d4; }
.finance-segment.seg-avskrivningar[b-zufkg2ayrl] { background: #94a3b8; }
.finance-segment.seg-finansiella[b-zufkg2ayrl]   { background: #fcd34d; }

.finance-chart-label[b-zufkg2ayrl] {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.02em;
}

.finance-chart-legend[b-zufkg2ayrl] {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    justify-content: center;
}

.finance-legend-item[b-zufkg2ayrl] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.finance-legend-dot[b-zufkg2ayrl] {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.finance-legend-dot.seg-profit[b-zufkg2ayrl]     { background: #14b8a6; }
.finance-legend-dot.seg-varuinkop[b-zufkg2ayrl]  { background: #fdba74; }
.finance-legend-dot.seg-personal[b-zufkg2ayrl]   { background: #a5b4fc; }
.finance-legend-dot.seg-lokal[b-zufkg2ayrl]      { background: #c4b5fd; }
.finance-legend-dot.seg-ovriga[b-zufkg2ayrl]     { background: #f9a8d4; }
.finance-legend-dot.seg-avskrivningar[b-zufkg2ayrl] { background: #94a3b8; }
.finance-legend-dot.seg-finansiella[b-zufkg2ayrl] { background: #fcd34d; }

/* ── Empty State ── */

.finance-empty-hero[b-zufkg2ayrl] {
    gap: 12px;
}

.finance-empty-icon[b-zufkg2ayrl] {
    opacity: 0.85;
    margin-bottom: 4px;
}

.finance-empty-desc[b-zufkg2ayrl] {
    font-size: 14px;
    color: #64748b;
    margin: 0;
    max-width: 420px;
    line-height: 1.6;
}

.finance-upload-btn-large[b-zufkg2ayrl] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: #0f766e;
    color: #fff;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    letter-spacing: 0.01em;
    margin-top: 8px;
}

.finance-upload-btn-large:hover[b-zufkg2ayrl] {
    background: #0d9488;
    transform: translateY(-1px);
}

.finance-upload-btn-large:active[b-zufkg2ayrl] {
    transform: translateY(0);
}

.finance-upload-btn-large[b-zufkg2ayrl]  input[type="file"] {
    display: none;
}

.finance-empty-hint[b-zufkg2ayrl] {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}

/* ── Loading Skeleton ── */

.finance-kpi-card.skeleton[b-zufkg2ayrl] {
    pointer-events: none;
}

.finance-skeleton-label[b-zufkg2ayrl] {
    height: 11px;
    width: 60%;
    border-radius: 4px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: finShimmer-b-zufkg2ayrl 1.5s infinite;
}

.finance-skeleton-value[b-zufkg2ayrl] {
    height: 28px;
    width: 80%;
    border-radius: 6px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: finShimmer-b-zufkg2ayrl 1.5s infinite;
    margin-top: 8px;
}

.skeleton-section[b-zufkg2ayrl] {
    pointer-events: none;
}

.finance-skeleton-full[b-zufkg2ayrl] {
    height: 180px;
    border-radius: 8px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: finShimmer-b-zufkg2ayrl 1.5s infinite;
}

@keyframes finShimmer-b-zufkg2ayrl {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Inline Chart Area ── */

.finance-inline-chart-area[b-zufkg2ayrl] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
}

/* ── Expand indicator on KPI cards ── */

.finance-kpi-expand-icon[b-zufkg2ayrl] {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 0.7rem;
    color: rgba(0, 0, 0, 0.2);
    transition: color 0.2s, transform 0.2s;
}

.finance-kpi-card-clickable:hover .finance-kpi-expand-icon[b-zufkg2ayrl] {
    color: rgba(0, 0, 0, 0.4);
}

.finance-kpi-card.expanded .finance-kpi-expand-icon[b-zufkg2ayrl] {
    color: rgba(0, 0, 0, 0.6);
}

/* Subtle expanded state indicator */
.finance-kpi-card.expanded[b-zufkg2ayrl] {
    border-color: #cbd5e1;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* ══════════════════════════════════════
   Responsive breakpoints
   ══════════════════════════════════════ */

/* Tablet: 2-column KPI */
@media (max-width: 900px) {
    .finance-kpi-grid[b-zufkg2ayrl] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 1-column KPI */
@media (max-width: 640px) {
    .finance-kpi-grid[b-zufkg2ayrl] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .finance-kpi-value[b-zufkg2ayrl] {
        font-size: 18px;
    }

    .finance-header-actions[b-zufkg2ayrl] {
        width: 100%;
    }

    .finance-year-select[b-zufkg2ayrl] {
        flex: 1;
        min-width: 0;
    }

    .finance-chart[b-zufkg2ayrl] {
        height: 110px;
    }
}

/* Extra narrow: stack KPIs */
@media (max-width: 400px) {
    .finance-kpi-grid[b-zufkg2ayrl] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Frontier.razor.rz.scp.css */

.CardPositionCenter[b-d960pboytf] {
    padding: 1rem;
    display: flex;
    justify-content: center;
    position: absolute;
}

/*Both*/
.CardBottomMargin[b-d960pboytf] {
    padding-bottom: 5px;
    vertical-align: top;
}

/*FrontierV3*/
.FrontierBottom[b-d960pboytf] {
    padding-bottom: 100px;
    padding-bottom: 5px;
}

/*Both*/
.Frontier-Queue[b-d960pboytf] {
    /*background-color: #92CDFA;*/
    padding: 0 0.2em;
    font-size: 3em; 
}

.WaitingMinutesDropddown[b-d960pboytf] {
    background-color: #cccccc;
    position: fixed;
    right: 120px;
    top: 10px;
    z-index: 101;
    width: 150px;
}
/* /Pages/ImagePromptTemplatesPage.razor.rz.scp.css */
/* === Base Container === */
.prompt-templates-container[b-xmosb830vi] {
    background-color: #f5f5f5;
    min-height: 100vh;
    margin-left: 72px;
}

.prompt-templates-content[b-xmosb830vi] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* === Page Header === */
.page-header[b-xmosb830vi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.page-header-left h1[b-xmosb830vi] {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 4px 0;
}

.page-header-left p[b-xmosb830vi] {
    font-size: 13px;
    color: #666;
    margin: 0;
}

.page-header-right[b-xmosb830vi] {
    display: flex;
    gap: 8px;
}

.btn-action[b-xmosb830vi] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-action:hover[b-xmosb830vi] {
    border-color: #1976d2;
    color: #1976d2;
}

.btn-action:disabled[b-xmosb830vi] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-action.primary[b-xmosb830vi] {
    background: #1976d2;
    border-color: #1976d2;
    color: #fff;
}

.btn-action.primary:hover[b-xmosb830vi] {
    background: #1565c0;
}

/* === Loading & Empty States === */
.loading-state[b-xmosb830vi],
.empty-state[b-xmosb830vi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 8px;
    color: #666;
    gap: 12px;
}

.loading-state i[b-xmosb830vi],
.empty-state i[b-xmosb830vi] {
    font-size: 24px;
    color: #999;
}

/* === Capability Tabs === */
.capability-tabs[b-xmosb830vi] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: #fff;
    padding: 4px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.capability-tab[b-xmosb830vi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.capability-tab:hover[b-xmosb830vi] {
    background: #f5f5f5;
    color: #333;
}

.capability-tab.active[b-xmosb830vi] {
    background: #1976d2;
    color: #fff;
}

.capability-tab .count[b-xmosb830vi] {
    background: rgba(0,0,0,0.1);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}

.capability-tab.active .count[b-xmosb830vi] {
    background: rgba(255,255,255,0.25);
}

/* === Capability Info Card === */
.capability-info-card[b-xmosb830vi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.capability-info-left h2[b-xmosb830vi] {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0 0 4px 0;
}

.capability-info-left p[b-xmosb830vi] {
    font-size: 13px;
    color: #666;
    margin: 0;
}

.capability-info-right[b-xmosb830vi] {
    text-align: right;
}

.info-label[b-xmosb830vi] {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.inheritance-badges[b-xmosb830vi] {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.inheritance-badge[b-xmosb830vi] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.inheritance-badge.tenant[b-xmosb830vi] {
    background: #e3f2fd;
    color: #1565c0;
}

.inheritance-badge.bu[b-xmosb830vi] {
    background: #e8f5e9;
    color: #2e7d32;
}

.inheritance-badge.category[b-xmosb830vi] {
    background: #fff3e0;
    color: #e65100;
}

/* === Scope Sections === */
.scope-sections[b-xmosb830vi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scope-section[b-xmosb830vi] {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
}

.scope-header[b-xmosb830vi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #fafafa;
    cursor: pointer;
    transition: background 0.2s;
}

.scope-header:hover[b-xmosb830vi] {
    background: #f5f5f5;
}

.scope-header-left[b-xmosb830vi] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle-icon[b-xmosb830vi] {
    color: #999;
    font-size: 11px;
    width: 14px;
}

.scope-icon[b-xmosb830vi] {
    font-size: 14px;
}

.scope-icon.tenant[b-xmosb830vi] { color: #1565c0; }
.scope-icon.bu[b-xmosb830vi] { color: #2e7d32; }
.scope-icon.category[b-xmosb830vi] { color: #e65100; }

.scope-title[b-xmosb830vi] {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.template-count[b-xmosb830vi] {
    font-size: 12px;
    color: #999;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 10px;
}

.scope-header-right[b-xmosb830vi] {
    display: flex;
    gap: 8px;
}

.flow-badge[b-xmosb830vi] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 4px;
    font-size: 11px;
}

.inherit-badge[b-xmosb830vi] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #e3f2fd;
    color: #1565c0;
    border-radius: 4px;
    font-size: 11px;
}

.scope-content[b-xmosb830vi] {
    padding: 16px;
    border-top: 1px solid #e0e0e0;
}

.empty-scope[b-xmosb830vi] {
    text-align: center;
    padding: 30px 20px;
    color: #666;
}

.empty-scope p[b-xmosb830vi] {
    margin: 0 0 12px 0;
    font-size: 13px;
}

.btn-add-template[b-xmosb830vi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 1px dashed #ccc;
    border-radius: 4px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-template:hover[b-xmosb830vi] {
    border-color: #1976d2;
    color: #1976d2;
}

/* === Category Groups === */
.category-group[b-xmosb830vi] {
    margin-bottom: 16px;
}

.category-group:last-child[b-xmosb830vi] {
    margin-bottom: 0;
}

.category-group-header[b-xmosb830vi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff8e1;
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 500;
    color: #e65100;
}

.category-count[b-xmosb830vi] {
    background: rgba(230, 81, 0, 0.15);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}

/* === Templates Grid === */
.templates-grid[b-xmosb830vi] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

/* === Template Card === */
.template-card[b-xmosb830vi] {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.template-card:hover[b-xmosb830vi] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.template-card.default[b-xmosb830vi] {
    border-color: #1976d2;
    border-width: 2px;
}

.template-card-header[b-xmosb830vi] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.template-name[b-xmosb830vi] {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.template-badges[b-xmosb830vi] {
    display: flex;
    gap: 4px;
}

.badge[b-xmosb830vi] {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.badge.default[b-xmosb830vi] {
    background: #1976d2;
    color: #fff;
}

.badge.inactive[b-xmosb830vi] {
    background: #f5f5f5;
    color: #999;
}

.badge.inherit[b-xmosb830vi] {
    background: #e3f2fd;
    color: #1565c0;
    padding: 4px 6px;
}

.template-description[b-xmosb830vi] {
    font-size: 12px;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

.template-meta[b-xmosb830vi] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: #999;
}

.template-meta i[b-xmosb830vi] {
    width: 14px;
    margin-right: 4px;
}

.chain-info[b-xmosb830vi] {
    color: #1976d2;
}

/* === Chain Path Visualization === */
.chain-path[b-xmosb830vi] {
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border: 1px solid #bbdefb;
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 4px;
}

.chain-label[b-xmosb830vi] {
    font-size: 10px;
    font-weight: 600;
    color: #1565c0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.chain-steps[b-xmosb830vi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.chain-step[b-xmosb830vi] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 500;
    color: #666;
    white-space: nowrap;
}

.chain-step i[b-xmosb830vi] {
    font-size: 10px;
    color: #999;
}

.chain-step.current[b-xmosb830vi] {
    background: #1976d2;
    border-color: #1565c0;
    color: #fff;
    font-weight: 600;
}

.chain-step.current i[b-xmosb830vi] {
    color: rgba(255,255,255,0.8);
}

.chain-arrow[b-xmosb830vi] {
    color: #90caf9;
    font-size: 10px;
}

.template-prompt[b-xmosb830vi] {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
    font-size: 11px;
}

.template-prompt strong[b-xmosb830vi] {
    color: #666;
    display: block;
    margin-bottom: 4px;
}

.template-prompt code[b-xmosb830vi] {
    color: #333;
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 11px;
    line-height: 1.4;
    word-break: break-word;
}

.template-actions[b-xmosb830vi] {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.btn-edit[b-xmosb830vi],
.btn-delete[b-xmosb830vi] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-edit[b-xmosb830vi] {
    background: #fff;
    color: #333;
}

.btn-edit:hover[b-xmosb830vi] {
    border-color: #1976d2;
    color: #1976d2;
}

.btn-delete[b-xmosb830vi] {
    background: #fff;
    color: #d32f2f;
    border-color: #ffcdd2;
}

.btn-delete:hover[b-xmosb830vi] {
    background: #ffebee;
    border-color: #d32f2f;
}

/* === Dialog Form === */
.dialog-form[b-xmosb830vi] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row[b-xmosb830vi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-row.three-col[b-xmosb830vi] {
    grid-template-columns: 1fr 1fr 1fr;
}

.form-group[b-xmosb830vi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label[b-xmosb830vi] {
    font-size: 12px;
    font-weight: 500;
    color: #666;
}

.form-group small[b-xmosb830vi] {
    font-size: 11px;
    color: #999;
}

.form-checkboxes[b-xmosb830vi] {
    display: flex;
    gap: 24px;
    padding-top: 8px;
}

/* === Responsive === */
@media (max-width: 768px) {
    .prompt-templates-container[b-xmosb830vi] {
        margin-left: 0;
    }

    .page-header[b-xmosb830vi] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .capability-info-card[b-xmosb830vi] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .capability-info-right[b-xmosb830vi] {
        text-align: left;
    }

    .templates-grid[b-xmosb830vi] {
        grid-template-columns: 1fr;
    }

    .form-row[b-xmosb830vi],
    .form-row.three-col[b-xmosb830vi] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Index.razor.rz.scp.css */
/* Index page — public menu layout
   Token source: design-system/colors_and_type.css */

[b-4s7qfcnkva] body {
    background-color: var(--paper);
}

.CartButtonPosition[b-4s7qfcnkva] {
    position: fixed;
    left: 50%;
    bottom: 40px;
    z-index: 101;
    width: 280px;
    margin-left: -140px;
}

[b-4s7qfcnkva] .CartButtonSize {
    width: 280px;
    height: 3.2rem;
    background: var(--ink) !important;
    color: var(--text-on-accent) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    font-family: var(--font-sans);
    font-size: var(--size-400);
    font-weight: var(--weight-semi);
    box-shadow: var(--elevation-3);
    transition: transform var(--motion-duration) var(--motion-curve),
                box-shadow var(--motion-duration) var(--motion-curve);
}

[b-4s7qfcnkva] .CartButtonSize:hover {
    background: var(--ink-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(20,20,15,0.14);
}

.CardPositionCenter[b-4s7qfcnkva] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.CardBottomMargin[b-4s7qfcnkva] {
    padding-bottom: var(--space-3);
}

.backend-access-row[b-4s7qfcnkva] {
    display: flex;
    justify-content: center;
    padding: var(--space-3) 0 var(--space-5);
}

.backend-access-link[b-4s7qfcnkva] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-4);
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: var(--size-300);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.backend-access-link:hover[b-4s7qfcnkva] {
    color: var(--text-primary);
    text-decoration: underline;
}

@media only screen and (min-width: 768px) {
    .RightPadding[b-4s7qfcnkva] {
        padding-right: 7px;
    }

    .LeftPadding[b-4s7qfcnkva] {
        padding-left: 7px;
    }
}
/* /Pages/Layout.razor.rz.scp.css */
/* === Base Container === */
.layout-container[b-pewdzm13om] {
    background-color: #f5f5f5;
    min-height: 100vh;
    margin-left: 72px;
}

.layout-content[b-pewdzm13om] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* === Page Header === */
.page-header[b-pewdzm13om] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.page-header-left h1[b-pewdzm13om] {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 4px 0;
}

.page-header-left p[b-pewdzm13om] {
    font-size: 13px;
    color: #666;
    margin: 0;
}

.page-header-right[b-pewdzm13om] {
    display: flex;
    gap: 8px;
}

/* === Layout Preview === */
.layout-preview-wrapper[b-pewdzm13om] {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
}

.layout-preview-hint[b-pewdzm13om] {
    padding: 12px 16px;
    background: #fafafa;
    border-bottom: 1px solid #e0e0e0;
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
}

.layout-preview-hint i[b-pewdzm13om] {
    color: #1976d2;
}

.layout-preview[b-pewdzm13om] {
    padding: 20px;
    min-height: 400px;
}

/* === Legacy Support === */
.CardPositionCenter[b-pewdzm13om] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.CardBottomMargin[b-pewdzm13om] {
    padding-bottom: 20px;
    vertical-align: top;
}

/* === Responsive === */
@media (max-width: 768px) {
    .layout-container[b-pewdzm13om] {
        margin-left: 0;
    }

    .layout-content[b-pewdzm13om] {
        padding: 16px;
    }

    .page-header[b-pewdzm13om] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .page-header-right[b-pewdzm13om] {
        width: 100%;
    }
}
/* /Pages/Login.razor.rz.scp.css */
.login-container[b-c6j03z2rf0] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
    padding: 20px;
}

.login-content[b-c6j03z2rf0] {
    width: 100%;
    max-width: 420px;
}

.login-card[b-c6j03z2rf0] {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.login-header[b-c6j03z2rf0] {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    color: #fff;
    padding: 32px 24px;
    text-align: center;
}

.login-header h1[b-c6j03z2rf0] {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.login-header p[b-c6j03z2rf0] {
    font-size: 14px;
    opacity: 0.9;
    margin: 0;
}

.login-body[b-c6j03z2rf0] {
    padding: 32px 24px;
}

.google-signin-btn[b-c6j03z2rf0] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 24px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
}

.google-signin-btn:hover[b-c6j03z2rf0] {
    border-color: #1976d2;
    background: #f8f9fa;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.15);
}

.google-signin-btn:active[b-c6j03z2rf0] {
    transform: scale(0.98);
}

.google-icon[b-c6j03z2rf0] {
    flex-shrink: 0;
}

.login-divider[b-c6j03z2rf0] {
    display: flex;
    align-items: center;
    margin: 24px 0;
}

.login-divider[b-c6j03z2rf0]::before,
.login-divider[b-c6j03z2rf0]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e0e0e0;
}

.login-divider span[b-c6j03z2rf0] {
    padding: 0 16px;
    font-size: 12px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.login-benefits[b-c6j03z2rf0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.benefit-item[b-c6j03z2rf0] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 14px;
    color: #555;
}

.benefit-item i[b-c6j03z2rf0] {
    color: #1976d2;
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.login-footer[b-c6j03z2rf0] {
    padding: 16px 24px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    text-align: center;
}

.login-footer p[b-c6j03z2rf0] {
    font-size: 12px;
    color: #999;
    margin: 0;
}

/* Responsive */
@media (max-width: 480px) {
    .login-container[b-c6j03z2rf0] {
        padding: 16px;
    }

    .login-header[b-c6j03z2rf0] {
        padding: 24px 20px;
    }

    .login-header h1[b-c6j03z2rf0] {
        font-size: 20px;
    }

    .login-body[b-c6j03z2rf0] {
        padding: 24px 20px;
    }

    .google-signin-btn[b-c6j03z2rf0] {
        padding: 12px 20px;
        font-size: 15px;
    }
}
/* /Pages/MarketingStrategistPage.razor.rz.scp.css */
/* MarketingStrategistPage — Phase 208. No hex literals. */

.marketing-strategist-layout[b-54bla0uls4] {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
    padding: var(--space-12) var(--space-6);
}

.main-area[b-54bla0uls4] {
    flex: 1;
    min-width: 0;
}

.suggestion-sidebar-panel[b-54bla0uls4] {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: var(--space-6);
}

.top-bar[b-54bla0uls4] {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    align-items: center;
    flex-wrap: wrap;
}

.loading-state[b-54bla0uls4],
.empty-state[b-54bla0uls4] {
    padding: var(--space-8);
    text-align: center;
    color: var(--text-muted);
}

.empty-state h3[b-54bla0uls4] {
    margin-bottom: var(--space-2);
    color: var(--text-body);
}

.btn-primary[b-54bla0uls4] {
    background: var(--accent);
    color: var(--text-on-accent);
    min-height: 44px;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-2);
    font-size: var(--size-400);
    font-weight: var(--weight-medium);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-primary:disabled[b-54bla0uls4] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary:hover:not(:disabled)[b-54bla0uls4] {
    opacity: 0.9;
}

.btn-outline[b-54bla0uls4] {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    min-height: 44px;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-2);
    font-size: var(--size-400);
    font-weight: var(--weight-medium);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-outline:disabled[b-54bla0uls4] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-outline:hover:not(:disabled)[b-54bla0uls4] {
    background: var(--surface-subtle);
}

.tenant-guard-message[b-54bla0uls4] {
    padding: var(--space-8);
    text-align: center;
    color: var(--text-muted);
}

.tenant-guard-message a[b-54bla0uls4] {
    color: var(--accent);
    text-decoration: underline;
    margin-left: var(--space-2);
}
/* /Pages/MenuManagePage.razor.rz.scp.css */
/* ===== Page Container ===== */
.menumanage-container[b-wvwieran73] {
    padding: 20px;
    background: #f0f0f0;
    min-height: 100vh;
}

.menumanage-content[b-wvwieran73] {
    max-width: 700px;
    margin: 0 auto;
}

.page-header[b-wvwieran73] {
    margin-bottom: 20px;
}

.page-title[b-wvwieran73] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 4px 0;
}

/* ===== Create Form ===== */
.btn-add[b-wvwieran73] {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 12px;
    transition: background 0.15s;
}

.btn-add:hover[b-wvwieran73] {
    background: #1d4ed8;
}

.create-form[b-wvwieran73] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.create-input[b-wvwieran73] {
    flex: 1;
    min-width: 200px;
    padding: 7px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
}

.create-input:focus[b-wvwieran73] {
    border-color: #2563eb;
}

/* ===== Filter Bar ===== */
.filter-bar[b-wvwieran73] {
    margin-bottom: 16px;
}

.toggle-label[b-wvwieran73] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #6b7280;
    cursor: pointer;
    user-select: none;
}

.toggle-label input[type="checkbox"][b-wvwieran73] {
    cursor: pointer;
}

/* ===== Menu List ===== */
.menu-list[b-wvwieran73] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menu-row[b-wvwieran73] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.menu-row:hover[b-wvwieran73] {
    background: #f9fafb;
    border-color: #d1d5db;
}

.menu-name-area[b-wvwieran73] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.menu-name[b-wvwieran73] {
    font-size: 0.95rem;
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rename-input[b-wvwieran73] {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid #2563eb;
    border-radius: 4px;
    font-size: 0.9rem;
    outline: none;
}

/* ===== Badges ===== */
.menu-badges[b-wvwieran73] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.status-badge[b-wvwieran73] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-draft[b-wvwieran73] {
    background: #e5e7eb;
    color: #374151;
}

.status-active[b-wvwieran73] {
    background: #d1fae5;
    color: #065f46;
}

.status-archived[b-wvwieran73] {
    background: #fef3c7;
    color: #92400e;
}

.product-count[b-wvwieran73] {
    font-size: 0.8rem;
    color: #9ca3af;
    white-space: nowrap;
}

/* ===== Overflow Actions ===== */
.menu-actions[b-wvwieran73] {
    position: relative;
    flex-shrink: 0;
}

.btn-overflow[b-wvwieran73] {
    background: none;
    border: none;
    padding: 4px 8px;
    font-size: 1rem;
    font-weight: 700;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 4px;
    letter-spacing: 0.1em;
    transition: background 0.12s, color 0.12s;
}

.btn-overflow:hover[b-wvwieran73] {
    background: #f3f4f6;
    color: #374151;
}

.actions-dropdown[b-wvwieran73] {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 100;
    min-width: 160px;
    overflow: hidden;
}

.dropdown-item[b-wvwieran73] {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 14px;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
    transition: background 0.1s;
}

.dropdown-item:hover[b-wvwieran73] {
    background: #f3f4f6;
}

.dropdown-item-danger[b-wvwieran73] {
    color: #dc2626;
}

.dropdown-item-danger:hover[b-wvwieran73] {
    background: #fef2f2;
}

/* ===== Buttons ===== */
.btn[b-wvwieran73] {
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.12s;
}

.btn-primary[b-wvwieran73] {
    background: #2563eb;
    color: #fff;
}

.btn-primary:hover[b-wvwieran73] {
    background: #1d4ed8;
}

.btn-secondary[b-wvwieran73] {
    background: #e5e7eb;
    color: #374151;
}

.btn-secondary:hover[b-wvwieran73] {
    background: #d1d5db;
}

.btn-danger[b-wvwieran73] {
    background: #dc2626;
    color: #fff;
}

.btn-danger:hover[b-wvwieran73] {
    background: #b91c1c;
}

.btn-small[b-wvwieran73] {
    padding: 4px 10px;
    font-size: 0.8rem;
}

/* ===== Empty State ===== */
.empty-state[b-wvwieran73] {
    text-align: center;
    padding: 48px 20px;
    color: #9ca3af;
    font-size: 0.95rem;
}

/* ===== Confirm Dialog ===== */
.confirm-overlay[b-wvwieran73] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.confirm-dialog[b-wvwieran73] {
    background: #fff;
    border-radius: 10px;
    padding: 24px 28px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    min-width: 280px;
    max-width: 400px;
    text-align: center;
}

.confirm-dialog p[b-wvwieran73] {
    font-size: 1rem;
    color: #1f2937;
    margin-bottom: 20px;
}

.confirm-actions[b-wvwieran73] {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* ===== Product Assignment Modal ===== */
.modal-overlay[b-wvwieran73] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal-panel[b-wvwieran73] {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 24px;
}

.modal-header[b-wvwieran73] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.modal-title[b-wvwieran73] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
}

.modal-close[b-wvwieran73] {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: #9ca3af;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.1s, background 0.1s;
}

.modal-close:hover[b-wvwieran73] {
    color: #374151;
    background: #f3f4f6;
}

.modal-loading[b-wvwieran73] {
    text-align: center;
    color: #6b7280;
    padding: 32px 0;
    font-size: 0.9rem;
}

/* ===== Checklist Section ===== */
.checklist-section[b-wvwieran73] {
    margin-bottom: 16px;
}

.checklist-toolbar[b-wvwieran73] {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.btn-link[b-wvwieran73] {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.btn-link:hover[b-wvwieran73] {
    color: #1d4ed8;
}

.category-group[b-wvwieran73] {
    margin-bottom: 12px;
}

.category-header[b-wvwieran73] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #374151;
    padding: 6px 0 4px 0;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.product-checkbox[b-wvwieran73] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px 0;
    gap: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    color: #374151;
}

.product-checkbox input[type="checkbox"][b-wvwieran73] {
    cursor: pointer;
    flex-shrink: 0;
}

.product-number[b-wvwieran73] {
    color: #9ca3af;
    min-width: 36px;
    font-size: 0.8rem;
}

.product-name-label[b-wvwieran73] {
    flex: 1;
}

/* ===== Reorder Section ===== */
.reorder-section[b-wvwieran73] {
    margin-top: 16px;
    border-top: 1px solid #e5e7eb;
    padding-top: 14px;
}

.reorder-header[b-wvwieran73] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.reorder-list[b-wvwieran73] {
    margin-top: 4px;
}

.reorder-item[b-wvwieran73] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
    color: #374151;
}

.reorder-name[b-wvwieran73] {
    flex: 1;
    margin-right: 8px;
}

.reorder-buttons[b-wvwieran73] {
    display: flex;
    gap: 4px;
}

.reorder-btn[b-wvwieran73] {
    width: 28px;
    height: 28px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s, border-color 0.1s;
}

.reorder-btn:hover:not(:disabled)[b-wvwieran73] {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.reorder-btn:disabled[b-wvwieran73] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ===== Modal Actions ===== */
.modal-actions[b-wvwieran73] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
    margin-top: 16px;
}

.btn-save[b-wvwieran73] {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: 7px 18px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}

.btn-save:hover:not(:disabled)[b-wvwieran73] {
    background: #1d4ed8;
}

.btn-save:disabled[b-wvwieran73] {
    opacity: 0.6;
    cursor: not-allowed;
}

.save-error[b-wvwieran73] {
    color: #dc2626;
    font-size: 0.85rem;
    text-align: center;
    margin-top: 8px;
}
/* /Pages/MukbangDiscovery.razor.rz.scp.css */
.discovery-page[b-idb7cnwmv4] {
    background-color: #0f0f1a;
    min-height: 100vh;
    padding: 1.5rem 1.25rem 3rem;
    color: #e2e8f0;
    box-sizing: border-box;
}

/* Results header */
.results-header[b-idb7cnwmv4] {
    margin-bottom: 1rem;
}

.results-count[b-idb7cnwmv4] {
    font-size: 0.85rem;
    color: #64748b;
    letter-spacing: 0.03em;
}

/* Cuisine filter pills */
.cuisine-pills[b-idb7cnwmv4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.pill[b-idb7cnwmv4] {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #2a2a4a;
    background-color: #1a1a2e;
    color: #94a3b8;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.pill:hover[b-idb7cnwmv4] {
    background-color: #2a2a4a;
    color: #e2e8f0;
    border-color: #4a4a7a;
}

.pill-active[b-idb7cnwmv4] {
    background-color: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
}

.pill-active:hover[b-idb7cnwmv4] {
    background-color: #4338ca;
    border-color: #4338ca;
    color: #ffffff;
}

/* Restaurant grid */
.restaurant-grid[b-idb7cnwmv4] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .restaurant-grid[b-idb7cnwmv4] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .restaurant-grid[b-idb7cnwmv4] {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1200px;
        margin: 0 auto;
    }

    .results-header[b-idb7cnwmv4],
    .cuisine-pills[b-idb7cnwmv4],
    .empty-state[b-idb7cnwmv4],
    .error-container[b-idb7cnwmv4] {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Loading skeletons */
.skeleton-card[b-idb7cnwmv4] {
    background-color: #1a1a2e;
    border: 1px solid #2a2a4a;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skeleton-title[b-idb7cnwmv4] {
    height: 18px;
    border-radius: 4px;
    background-color: #2a2a4a;
    width: 60%;
}

.skeleton-badge[b-idb7cnwmv4] {
    height: 20px;
    border-radius: 999px;
    background-color: #2a2a4a;
    width: 30%;
}

.skeleton-body[b-idb7cnwmv4] {
    height: 48px;
    border-radius: 6px;
    background-color: #2a2a4a;
}

.skeleton-footer[b-idb7cnwmv4] {
    height: 14px;
    border-radius: 4px;
    background-color: #2a2a4a;
    width: 80%;
    margin-top: 0.25rem;
}

@keyframes pulse-b-idb7cnwmv4 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.pulse[b-idb7cnwmv4] {
    animation: pulse-b-idb7cnwmv4 1.6s ease-in-out infinite;
}

/* Empty state */
.empty-state[b-idb7cnwmv4] {
    text-align: center;
    padding: 3rem 1rem;
    color: #64748b;
    font-size: 1rem;
}

/* Error state */
.error-container[b-idb7cnwmv4] {
    text-align: center;
    padding: 2rem 1rem;
    color: #f87171;
    font-size: 0.95rem;
}
/* /Pages/MukbangFeed.razor.rz.scp.css */
[b-31ttqgi9xw](.content) {
    padding: 0 !important;
}

.feed-container[b-31ttqgi9xw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px;
    max-width: 520px;
    margin: 0 auto 80px;
    background: var(--bg);
}

.feed-card[b-31ttqgi9xw] {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-5);
    overflow: hidden;
    box-shadow: var(--shadow-1);
}

.feed-card.featured[b-31ttqgi9xw] {
    grid-column: span 2;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-6);
    box-shadow: var(--shadow-2);
}

.feed-loading[b-31ttqgi9xw],
.feed-empty[b-31ttqgi9xw] {
    max-width: 520px;
    margin: 32px auto;
    padding: 24px 16px;
    text-align: center;
    color: var(--ink-2);
    background: var(--bg);
}

.feed-empty p[b-31ttqgi9xw] {
    margin: 0 0 12px;
    font-size: 14px;
}

.feed-empty-cta[b-31ttqgi9xw] {
    background: var(--accent);
    color: var(--surface);
    border: none;
    border-radius: var(--radius-5);
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* /Pages/MukbangOnboardingPage.razor.rz.scp.css */
.onboarding-container[b-j1ze9rpzar] {
    max-width: 480px;
    margin: 0 auto;
    padding: 24px;
}

.onboarding-title[b-j1ze9rpzar] {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #111;
}

.onboarding-subtitle[b-j1ze9rpzar] {
    font-size: 16px;
    color: #555;
    margin-bottom: 8px;
}

.section-header[b-j1ze9rpzar] {
    font-size: 18px;
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 8px;
    color: #222;
}

.checkbox-grid[b-j1ze9rpzar] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.checkbox-label[b-j1ze9rpzar] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    color: #333;
    transition: background 0.15s, border-color 0.15s;
}

.checkbox-label input[type="checkbox"][b-j1ze9rpzar] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.checkbox-label.selected[b-j1ze9rpzar] {
    background: #e3f2fd;
    border-color: #1976d2;
    color: #1565c0;
    font-weight: 500;
}

.text-input[b-j1ze9rpzar] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
    color: #333;
    outline: none;
    transition: border-color 0.2s;
}

.text-input:focus[b-j1ze9rpzar] {
    border-color: #1976d2;
}

.submit-btn[b-j1ze9rpzar] {
    display: block;
    width: 100%;
    padding: 14px;
    background: #00d4aa;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 24px;
    transition: background 0.2s;
}

.submit-btn:hover:not(:disabled)[b-j1ze9rpzar] {
    background: #00b894;
}

.submit-btn:disabled[b-j1ze9rpzar] {
    opacity: 0.7;
    cursor: not-allowed;
}

.skip-btn[b-j1ze9rpzar] {
    display: block;
    width: 100%;
    padding: 12px;
    background: transparent;
    color: #666;
    border: none;
    font-size: 15px;
    cursor: pointer;
    margin-top: 8px;
}

.skip-btn:hover:not(:disabled)[b-j1ze9rpzar] {
    color: #333;
}

.skip-btn:disabled[b-j1ze9rpzar] {
    opacity: 0.5;
    cursor: not-allowed;
}

.error-message[b-j1ze9rpzar] {
    color: #d32f2f;
    font-size: 14px;
    margin-top: 8px;
    text-align: center;
}
/* /Pages/OrderPage.razor.rz.scp.css */
body[b-ri5in5lp9i] {
    background-color: #f2f2f2;
}

.CardPositionCenter[b-ri5in5lp9i] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.CardBottomMargin[b-ri5in5lp9i] {
    padding-bottom: 10px;
}

[b-ri5in5lp9i] .e-card .e-card-content {
    padding: 0px;
}

.MessageBox[b-ri5in5lp9i] {
    font-family: Helvetica, 'Segoe UI' !important;
    vert-align: top;
    padding: 20px;
    font-size: medium;
}

.OrderNumber[b-ri5in5lp9i] {
    font-size: 60px;
    text-align: center;
    width: 3em;
    padding: 0.2em 0.2em;
    margin: auto; /* Centerizes the order number box */
}

.CardHeader[b-ri5in5lp9i] {
    font-size: small;
    color: #808080;
    margin: 5px;
    font-weight: 500;
}

.wrapper[b-ri5in5lp9i] {
    width: auto;
    height: auto;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    /*grid-template-columns: 50px auto 65px;*/
    color: #808080;
}

.left[b-ri5in5lp9i] {
    /*height: 65px;*/
}

.Center[b-ri5in5lp9i] {
    text-align: left;
    /* height: 65px;*/
}

.right[b-ri5in5lp9i] {
    /*height: 65px;*/
}

.ProductNumber[b-ri5in5lp9i] {
    position: absolute;
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 14px !important;
    font-weight: 700;
    padding-top: 5px;
    padding-left: 0.6em;
}

.ProductName[b-ri5in5lp9i] {
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 14px !important;
    font-weight: 700;
    padding-top: 5px;
    padding-left: 0.6em;
}

.ProductDescription[b-ri5in5lp9i] {
    padding-top: 2px;
    padding-left: 0.6em;
    word-wrap: break-word;
}

.DescriptionText[b-ri5in5lp9i] {
    width: 97%;
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 12px !important;
}

.ProductPrice[b-ri5in5lp9i] {
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 14px !important;
    font-weight: 700;
    padding-top: 5px;
    padding-left: 0.6em;
    right: 20px;
    position: absolute;
    width: 6em;
}


/*Buttons*/
[b-ri5in5lp9i] .BackToShopping {
    margin-top: 10px;
}

[b-ri5in5lp9i] .Pay {
    margin-top: 10px;
    position: absolute;
    right: 0;
}

[b-ri5in5lp9i] .e-priceButtonWidth {
    width: 4rem;
}




/*Accordion*/
[b-ri5in5lp9i] .e-acrdn-header-content {
    justify-content: center;
    width: 97%;
    color: #808080;
}

[b-ri5in5lp9i] .e-accordion .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content {
    border-top: 0px solid rgba(0,0,0,0.13);
    color: #808080;
    width: 97%;
}

[b-ri5in5lp9i] .e-accordion .e-acrdn-item .e-acrdn-header {
    /*line-height: 0px;*/
    width: 97%;
    margin-bottom: 5px;
    min-height: 5em;
    /* white-space: normal for Linebreak*/
    white-space: normal;
}



[b-ri5in5lp9i] .BackToShopping {
    margin-top: 10px;
}

:deep .Pay[b-ri5in5lp9i] {
    margin-top: 10px;
    position: absolute;
    right: 0;
}

[b-ri5in5lp9i] .ProductDeleteButton {
    background: rgba(255, 255, 255, 0.7);
    color: #6c757d;
    position: absolute;
    height: 23px;
    width: 55px;
    right: 40px;
    top: 31px;
}


.wrapper[b-ri5in5lp9i] {
width: auto;
height: auto;
box-sizing: border-box;
display: grid;
grid-auto-flow: row;
/*grid-template-columns: 50px auto 65px;*/
color: #808080;
}

.left[b-ri5in5lp9i] {
/*height: 65px;*/
}

.Center[b-ri5in5lp9i] {
text-align: left;
/* height: 65px;*/
}

.right[b-ri5in5lp9i] {
/*height: 65px;*/
}

[b-ri5in5lp9i] .Pay {
margin-top: 10px;
position: absolute;
right: 0;
}

[b-ri5in5lp9i] .BackToShopping {
margin-top: 10px;
}


/* DivTable.com */
.divTable[b-ri5in5lp9i] {
    font-family: Helvetica, 'Segoe UI' !important;
    display: table;
    width: 90%;
    min-width: 250px;
    margin: 0 auto;
}

.divTableRow[b-ri5in5lp9i] {
    display: table-row;
}

.divTableCell[b-ri5in5lp9i], .divTableHead[b-ri5in5lp9i] {
    border: 0px solid #999999;
    display: table-cell;
    padding: 3px 10px;
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 14px !important;
}

.divTableHeading[b-ri5in5lp9i] {
    background-color: #EEE;
    display: table-header-group;
    font-weight: bold;
}

.divTableFoot[b-ri5in5lp9i] {
    background-color: #EEE;
    display: table-footer-group;
    font-weight: bold;
}

.divTableBody[b-ri5in5lp9i] {
    display: table-row-group;
}

[b-ri5in5lp9i] .BackToShopping {
    margin-top: 10px;
}
/* /Pages/PaymentAdminPage.razor.rz.scp.css */
/* Payment support keeps only domain-specific details here.
   Workspace shell, cards, forms, buttons, tables, alerts, and modals are shared primitives. */

.search-row[b-ynh19y383i] {
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
}

.search-group[b-ynh19y383i] {
    flex: 1;
}

.info-grid[b-ynh19y383i] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.info-item[b-ynh19y383i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.info-label[b-ynh19y383i] {
    font-size: var(--size-200);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.info-value[b-ynh19y383i] {
    font-size: var(--size-400);
    color: var(--text-primary);
}

.text-muted[b-ynh19y383i] {
    color: var(--text-muted);
}

.text-warning[b-ynh19y383i] {
    color: var(--status-warn);
}

.error-code[b-ynh19y383i] {
    font-size: var(--size-200);
    font-family: var(--font-mono);
    color: var(--status-err);
    background: var(--surface-subtle);
    padding: 1px var(--space-1);
    border-radius: var(--radius-1);
}

.mono[b-ynh19y383i] {
    font-family: var(--font-mono);
    font-size: var(--size-200);
}

.text-sm[b-ynh19y383i] {
    font-size: var(--size-200);
}

@media (max-width: 768px) {
    .search-row[b-ynh19y383i] {
        flex-direction: column;
    }

    .info-grid[b-ynh19y383i] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/PhotoMatchingPage.razor.rz.scp.css */
/* === Base Container === */
.photo-matching-container[b-y23qwzd4jp] {
    min-height: 100vh;
    background: #f5f5f5;
    margin-left: 72px;
}

.photo-matching-content[b-y23qwzd4jp] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* === Page Header === */
.page-header[b-y23qwzd4jp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.page-header h1[b-y23qwzd4jp] {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.page-header p[b-y23qwzd4jp] {
    margin: 0;
    color: #666;
    font-size: 13px;
}

.page-header-right[b-y23qwzd4jp] {
    display: flex;
    gap: 8px;
}

/* === Buttons === */
.btn-action[b-y23qwzd4jp] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-action:hover[b-y23qwzd4jp] {
    border-color: #1976d2;
    color: #1976d2;
}

.btn-action:disabled[b-y23qwzd4jp] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-action.primary[b-y23qwzd4jp] {
    background: #1976d2;
    border-color: #1976d2;
    color: #fff;
}

.btn-action.primary:hover[b-y23qwzd4jp] {
    background: #1565c0;
    border-color: #1565c0;
}

.btn-action.danger[b-y23qwzd4jp] {
    background: #c62828;
    border-color: #c62828;
    color: white;
}

.btn-action.danger:hover[b-y23qwzd4jp] {
    background: #b71c1c;
    border-color: #b71c1c;
}

/* === Loading & Empty States === */
.loading-state[b-y23qwzd4jp],
.empty-state[b-y23qwzd4jp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 8px;
    color: #666;
    gap: 12px;
}

.loading-state i[b-y23qwzd4jp],
.empty-state i[b-y23qwzd4jp] {
    font-size: 24px;
    color: #999;
}

/* === Three Panel Layout === */
.three-panel-layout[b-y23qwzd4jp] {
    display: grid;
    grid-template-columns: 280px 1fr 340px;
    gap: 16px;
    height: calc(100vh - 160px);
}

.panel[b-y23qwzd4jp] {
    background: white;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header[b-y23qwzd4jp] {
    padding: 14px 16px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.panel-header h3[b-y23qwzd4jp] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-header i[b-y23qwzd4jp] {
    color: #1976d2;
}

.filter-controls[b-y23qwzd4jp] {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.search-input[b-y23qwzd4jp], .status-filter[b-y23qwzd4jp], .type-filter[b-y23qwzd4jp] {
    padding: 7px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    background: white;
}

.search-input:focus[b-y23qwzd4jp], .status-filter:focus[b-y23qwzd4jp], .type-filter:focus[b-y23qwzd4jp] {
    outline: none;
    border-color: #1976d2;
}

.search-input[b-y23qwzd4jp] {
    flex: 1;
}

.status-filter[b-y23qwzd4jp], .type-filter[b-y23qwzd4jp] {
    min-width: 90px;
}

.panel-content[b-y23qwzd4jp] {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

/* === Product List === */
.product-list[b-y23qwzd4jp] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.product-item[b-y23qwzd4jp] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #fafafa;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.product-item:hover[b-y23qwzd4jp] {
    background: #f0f0f0;
}

.product-item.selected[b-y23qwzd4jp] {
    background: #e3f2fd;
    border-color: #1976d2;
}

.product-item.has-ai .product-number[b-y23qwzd4jp] {
    color: #2e7d32;
}

.product-status i[b-y23qwzd4jp] {
    font-size: 14px;
}

.text-success[b-y23qwzd4jp] {
    color: #2e7d32;
}

.text-muted[b-y23qwzd4jp] {
    color: #9e9e9e;
}

.product-info[b-y23qwzd4jp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.product-number[b-y23qwzd4jp] {
    font-weight: 600;
    font-size: 12px;
    color: #1976d2;
}

.product-name[b-y23qwzd4jp] {
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-category[b-y23qwzd4jp] {
    font-size: 11px;
    color: #666;
}

/* === Photo Grid === */
.photo-grid[b-y23qwzd4jp] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.photo-item[b-y23qwzd4jp] {
    display: flex;
    gap: 10px;
    padding: 8px;
    background: #fafafa;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    position: relative;
}

.photo-item:hover[b-y23qwzd4jp] {
    background: #f0f0f0;
}

.photo-item.selected[b-y23qwzd4jp] {
    background: #e3f2fd;
    border-color: #1976d2;
}

.photo-thumbnail[b-y23qwzd4jp] {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.photo-item.selected .photo-thumbnail[b-y23qwzd4jp] {
    border-color: #1976d2;
}

.selection-badge[b-y23qwzd4jp] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    background: #1976d2;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.photo-info[b-y23qwzd4jp] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.photo-filename[b-y23qwzd4jp] {
    font-size: 11px;
    color: #666;
    font-family: monospace;
}

.photo-dish[b-y23qwzd4jp] {
    font-weight: 600;
    font-size: 13px;
    color: #333;
}

.photo-type[b-y23qwzd4jp] {
    font-size: 11px;
    color: #1976d2;
    background: #e3f2fd;
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
    width: fit-content;
}

.photo-rating[b-y23qwzd4jp] {
    margin-top: 3px;
}

.photo-rating i[b-y23qwzd4jp] {
    font-size: 11px;
    color: #f57f17;
}

.photo-rating i.far[b-y23qwzd4jp] {
    color: #bdbdbd;
}

/* === Details Panel === */
.details-panel .panel-content[b-y23qwzd4jp] {
    padding: 16px;
}

.match-preview[b-y23qwzd4jp], .current-match[b-y23qwzd4jp] {
    margin-bottom: 20px;
}

.match-item[b-y23qwzd4jp] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 10px;
}

.match-item label[b-y23qwzd4jp] {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
}

.match-item span[b-y23qwzd4jp] {
    font-size: 13px;
    color: #333;
}

.attribute-preview h4[b-y23qwzd4jp], .current-match h4[b-y23qwzd4jp] {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px;
}

.attribute-list[b-y23qwzd4jp] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fafafa;
    border-radius: 4px;
    padding: 10px;
    border: 1px solid #e0e0e0;
}

.attribute-item[b-y23qwzd4jp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.attr-name[b-y23qwzd4jp] {
    font-size: 10px;
    font-weight: 600;
    color: #1976d2;
    font-family: monospace;
}

.attr-value[b-y23qwzd4jp] {
    font-size: 12px;
    color: #333;
}

.match-actions[b-y23qwzd4jp] {
    margin-top: 16px;
}

.match-actions .btn-action[b-y23qwzd4jp] {
    width: 100%;
    justify-content: center;
}

.empty-selection[b-y23qwzd4jp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 16px;
    text-align: center;
    color: #666;
}

.empty-selection i[b-y23qwzd4jp] {
    font-size: 28px;
    color: #bdbdbd;
}

.empty-selection p[b-y23qwzd4jp] {
    margin: 0;
    font-size: 13px;
}

.status-message[b-y23qwzd4jp] {
    margin-top: 14px;
    padding: 10px;
    border-radius: 4px;
    font-size: 12px;
}

.status-message.success[b-y23qwzd4jp] {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.status-message.error[b-y23qwzd4jp] {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

/* === Selected Photos Preview === */
.selected-photos-list[b-y23qwzd4jp] {
    margin-bottom: 16px;
}

.selected-photos-list h4[b-y23qwzd4jp] {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px;
}

.selected-photo-preview[b-y23qwzd4jp] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: #f5f5f5;
    border-radius: 4px;
    margin-bottom: 6px;
}

.selected-photo-preview img[b-y23qwzd4jp] {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.photo-preview-info[b-y23qwzd4jp] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.photo-preview-name[b-y23qwzd4jp] {
    font-size: 12px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.photo-preview-file[b-y23qwzd4jp] {
    font-size: 10px;
    color: #666;
    font-family: monospace;
}

.btn-remove-photo[b-y23qwzd4jp] {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: #999;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-remove-photo:hover[b-y23qwzd4jp] {
    background: #ffebee;
    color: #c62828;
}

/* === Matched Photos Display === */
.matched-photo-item[b-y23qwzd4jp] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: #f5f5f5;
    border-radius: 4px;
    margin-bottom: 6px;
}

.matched-photo-item img[b-y23qwzd4jp] {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.matched-photo-item span[b-y23qwzd4jp] {
    font-size: 11px;
    color: #666;
    font-family: monospace;
}

/* === Responsive === */
@media (max-width: 1200px) {
    .three-panel-layout[b-y23qwzd4jp] {
        grid-template-columns: 260px 1fr 300px;
    }
}

@media (max-width: 1000px) {
    .three-panel-layout[b-y23qwzd4jp] {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .details-panel[b-y23qwzd4jp] {
        grid-column: span 2;
    }
}
/* /Pages/PrintableMenuPage.razor.rz.scp.css */
/* ===== Page Container ===== */
.printmenu-container[b-1zhqpd9xje] {
    padding: 20px;
    background: #f0f0f0;
    min-height: 100vh;
}

.printmenu-content[b-1zhqpd9xje] {
    max-width: 900px;
    margin: 0 auto;
}

/* ===== Controls Bar ===== */
.controls-bar[b-1zhqpd9xje] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 10px;
}

.controls-left[b-1zhqpd9xje] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.control-label[b-1zhqpd9xje] {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.control-select[b-1zhqpd9xje] {
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
}

.control-toggle[b-1zhqpd9xje] {
    padding: 6px 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.control-toggle.active[b-1zhqpd9xje] {
    background: #2d323e;
    color: #fff;
    border-color: #2d323e;
}

.print-button[b-1zhqpd9xje] {
    padding: 8px 24px;
    background: #2d323e;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.print-button:hover[b-1zhqpd9xje] {
    background: #1a1e26;
}

.last-printed[b-1zhqpd9xje] {
    font-size: 0.8rem;
    color: #888;
    margin-right: 1rem;
    white-space: nowrap;
}

/* ===== A4 Page ===== */
.a4-page[b-1zhqpd9xje] {
    width: 210mm;
    height: 297mm;
    margin: 0 auto;
    padding: 15mm 20mm;
    background: #fff;
    box-shadow: 0 2px 16px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
}

.a4-page + .a4-page[b-1zhqpd9xje] {
    margin-top: 24px;
}

/* ===== Page Number ===== */
.page-number[b-1zhqpd9xje] {
    position: absolute;
    bottom: 10mm;
    right: 20mm;
    font-size: 8pt;
    opacity: 0.4;
}

/* ===== Menu Header ===== */
.menu-header[b-1zhqpd9xje] {
    text-align: center;
    margin-bottom: 8mm;
}

.menu-logo[b-1zhqpd9xje] {
    max-width: 65mm;
    height: auto;
    margin: 0 auto 4px;
    display: block;
}

.restaurant-name[b-1zhqpd9xje] {
    margin: 0 0 4px 0;
    font-size: 28pt;
    letter-spacing: 2px;
}

.menu-subtitle[b-1zhqpd9xje] {
    font-size: 12pt;
    text-transform: uppercase;
    letter-spacing: 4px;
}

/* ===== Price Legend (Text/Images modes only) ===== */
.price-legend[b-1zhqpd9xje] {
    text-align: right;
    font-size: 9pt;
    margin-bottom: 4mm;
    opacity: 0.6;
}

.price-legend-separator[b-1zhqpd9xje] {
    margin: 0 4px;
}

.price-label[b-1zhqpd9xje] {
    font-size: 7pt;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.5;
    margin-right: 3px;
}

[b-1zhqpd9xje] .price-label {
    font-size: 7pt;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.5;
    margin-right: 3px;
}

[b-1zhqpd9xje] .price-sep {
    margin: 0 3px;
    opacity: 0.4;
}

/* ===== Group Separator ===== */
.group-separator[b-1zhqpd9xje] {
    height: 1px;
    margin: 3mm 0;
    opacity: 0.15;
    background: currentColor;
}

/* ===== Category ===== */
.menu-category[b-1zhqpd9xje] {
    margin-bottom: 6mm;
    page-break-inside: avoid;
}

.category-heading[b-1zhqpd9xje] {
    font-size: 14pt;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 2mm 0;
}

.category-divider[b-1zhqpd9xje] {
    height: 1px;
    margin-bottom: 3mm;
}

/* ===== Menu Item ===== */
.menu-item[b-1zhqpd9xje] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2.5mm;
    page-break-inside: avoid;
}

.item-details[b-1zhqpd9xje] {
    flex: 1;
    min-width: 0;
}

.item-top-row[b-1zhqpd9xje] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.item-number[b-1zhqpd9xje] {
    font-weight: 700;
    font-size: 10pt;
    min-width: 24px;
    flex-shrink: 0;
}

.item-name[b-1zhqpd9xje] {
    font-weight: 600;
    font-size: 10pt;
    white-space: nowrap;
}

.item-dots[b-1zhqpd9xje] {
    flex: 1;
    border-bottom: 1px dotted;
    margin: 0 4px;
    min-width: 20px;
    opacity: 0.3;
    align-self: baseline;
    position: relative;
    top: -3px;
}

.item-prices[b-1zhqpd9xje] {
    font-size: 10pt;
    white-space: nowrap;
    flex-shrink: 0;
}

.price-lunch[b-1zhqpd9xje] {
    font-weight: 600;
}

.price-separator[b-1zhqpd9xje] {
    margin: 0 2px;
    opacity: 0.4;
}

.price-menu[b-1zhqpd9xje] {
    font-weight: 400;
}

.price-na[b-1zhqpd9xje] {
    opacity: 0.3;
}

.item-description[b-1zhqpd9xje] {
    font-size: 8.5pt;
    opacity: 0.65;
    margin-top: 1px;
    line-height: 1.3;
    padding-left: 30px;
}

/* ===== Image Mode ===== */
.item-image[b-1zhqpd9xje] {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 10px;
    flex-shrink: 0;
}

.item-image img[b-1zhqpd9xje] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text-only .item-image[b-1zhqpd9xje] {
    display: none;
}

/* ===== Footer ===== */
.menu-footer[b-1zhqpd9xje] {
    margin-top: 8mm;
    text-align: center;
}

.footer-divider[b-1zhqpd9xje] {
    height: 1px;
    margin-bottom: 3mm;
}

.footer-text[b-1zhqpd9xje] {
    font-size: 9pt;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.5;
}


/* =========================================================
   THEME: Modern Japanese
   ========================================================= */
.theme-japanese[b-1zhqpd9xje] {
    font-family: 'Noto Serif', Georgia, serif;
    color: #4a4238;
    background: #faf8f5;
}

.theme-japanese .restaurant-name[b-1zhqpd9xje] {
    font-weight: 300;
    color: #4a4238;
}

.theme-japanese .menu-subtitle[b-1zhqpd9xje] {
    color: #c17c4e;
    font-weight: 400;
}

.theme-japanese .category-heading[b-1zhqpd9xje] {
    font-weight: 400;
    color: #4a4238;
    border-bottom: none;
}

.theme-japanese .category-divider[b-1zhqpd9xje] {
    background: #c17c4e;
    opacity: 0.4;
}

.theme-japanese .footer-divider[b-1zhqpd9xje] {
    background: #c17c4e;
    opacity: 0.3;
}

.theme-japanese .item-dots[b-1zhqpd9xje] {
    border-bottom-color: #4a4238;
}

.theme-japanese .item-image[b-1zhqpd9xje] {
    border-radius: 4px;
}


/* =========================================================
   THEME: Classic Elegant
   ========================================================= */
.theme-elegant[b-1zhqpd9xje] {
    font-family: Georgia, 'Playfair Display', 'Times New Roman', serif;
    color: #2c2c2c;
    background: #fdfcf8;
}

.theme-elegant .menu-header[b-1zhqpd9xje] {
    border-bottom: 2px double #b8860b;
    padding-bottom: 6mm;
    margin-bottom: 10mm;
}

.theme-elegant .restaurant-name[b-1zhqpd9xje] {
    font-weight: 700;
    color: #2c2c2c;
    font-style: italic;
}

.theme-elegant .menu-subtitle[b-1zhqpd9xje] {
    color: #b8860b;
    font-weight: 600;
}

.theme-elegant .category-heading[b-1zhqpd9xje] {
    font-style: italic;
    color: #b8860b;
    font-weight: 700;
}

.theme-elegant .category-divider[b-1zhqpd9xje] {
    background: linear-gradient(to right, transparent, #b8860b, transparent);
    height: 1px;
}

.theme-elegant .footer-divider[b-1zhqpd9xje] {
    background: linear-gradient(to right, transparent, #b8860b, transparent);
}

.theme-elegant .item-dots[b-1zhqpd9xje] {
    border-bottom-color: #b8860b;
    opacity: 0.25;
}

.theme-elegant .item-number[b-1zhqpd9xje] {
    color: #b8860b;
}

.theme-elegant .price-lunch[b-1zhqpd9xje] {
    color: #b8860b;
}

.theme-elegant .item-image[b-1zhqpd9xje] {
    border-radius: 2px;
    border: 1px solid #e8e0cc;
}


/* =========================================================
   THEME: Bold Contemporary
   ========================================================= */
.theme-contemporary[b-1zhqpd9xje] {
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    color: #ffffff;
    background: #1a1a2e;
}

.theme-contemporary .restaurant-name[b-1zhqpd9xje] {
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 6px;
}

.theme-contemporary .menu-subtitle[b-1zhqpd9xje] {
    color: #e94560;
    font-weight: 700;
}

.theme-contemporary .category-heading[b-1zhqpd9xje] {
    color: #e94560;
    font-weight: 800;
    letter-spacing: 3px;
}

.theme-contemporary .category-divider[b-1zhqpd9xje] {
    background: #e94560;
    height: 2px;
}

.theme-contemporary .footer-divider[b-1zhqpd9xje] {
    background: #e94560;
    height: 2px;
}

.theme-contemporary .item-dots[b-1zhqpd9xje] {
    border-bottom-color: #e94560;
    opacity: 0.4;
}

.theme-contemporary .item-number[b-1zhqpd9xje] {
    color: #e94560;
    font-weight: 900;
}

.theme-contemporary .price-lunch[b-1zhqpd9xje] {
    color: #e94560;
}

.theme-contemporary .item-description[b-1zhqpd9xje] {
    opacity: 0.5;
}

.theme-contemporary .item-image[b-1zhqpd9xje] {
    border-radius: 8px;
    border: 2px solid #e94560;
}


/* =========================================================
   THEME: Minimal Scandinavian
   ========================================================= */
.theme-scandinavian[b-1zhqpd9xje] {
    font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
    color: #1a1a1a;
    background: #ffffff;
}

.theme-scandinavian .restaurant-name[b-1zhqpd9xje] {
    font-weight: 300;
    letter-spacing: 8px;
    text-transform: uppercase;
    font-size: 24pt;
}

.theme-scandinavian .menu-subtitle[b-1zhqpd9xje] {
    color: #999;
    font-weight: 300;
    letter-spacing: 6px;
}

.theme-scandinavian .category-heading[b-1zhqpd9xje] {
    font-weight: 600;
    font-size: 11pt;
    color: #1a1a1a;
    letter-spacing: 3px;
}

.theme-scandinavian .category-divider[b-1zhqpd9xje] {
    background: #e0e0e0;
}

.theme-scandinavian .footer-divider[b-1zhqpd9xje] {
    background: #e0e0e0;
}

.theme-scandinavian .item-dots[b-1zhqpd9xje] {
    border-bottom-color: #ccc;
}

.theme-scandinavian .item-name[b-1zhqpd9xje] {
    font-weight: 400;
}

.theme-scandinavian .item-number[b-1zhqpd9xje] {
    font-weight: 400;
    opacity: 0.5;
}

.theme-scandinavian .item-image[b-1zhqpd9xje] {
    border-radius: 50%;
}

.theme-scandinavian .menu-category[b-1zhqpd9xje] {
    margin-bottom: 8mm;
}


/* =========================================================
   THEME: Asian Street Food
   ========================================================= */
.theme-fastfood[b-1zhqpd9xje] {
    font-family: 'Bebas Neue', 'Impact', 'Arial Black', Arial, sans-serif;
    color: #fef9e7;
    background: #1c1c1c;
}

.theme-fastfood .menu-header[b-1zhqpd9xje] {
    background: #cc0000;
    margin: -15mm -20mm 6mm -20mm;
    padding: 10mm 20mm 8mm 20mm;
    text-align: center;
}

.theme-fastfood .menu-logo[b-1zhqpd9xje] {
    max-width: 55mm;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.theme-fastfood .menu-subtitle[b-1zhqpd9xje] {
    color: #ffd700;
    font-weight: 700;
    font-size: 14pt;
    letter-spacing: 6px;
    text-transform: uppercase;
}


.theme-fastfood .category-heading[b-1zhqpd9xje] {
    font-family: 'Bebas Neue', 'Impact', 'Arial Black', sans-serif;
    color: #ffd700;
    font-weight: 700;
    font-size: 16pt;
    letter-spacing: 4px;
    margin-bottom: 1mm;
}

.theme-fastfood .category-divider[b-1zhqpd9xje] {
    background: #cc0000;
    height: 2px;
    opacity: 1;
}

.theme-fastfood .group-separator[b-1zhqpd9xje] {
    background: #cc0000;
    height: 2px;
    opacity: 0.5;
    margin: 4mm 0;
}

.theme-fastfood .item-number[b-1zhqpd9xje] {
    color: #ffd700;
    font-family: 'Bebas Neue', 'Impact', 'Arial Black', sans-serif;
    font-weight: 900;
    font-size: 12pt;
    min-width: 28px;
}

.theme-fastfood .item-name[b-1zhqpd9xje] {
    font-family: Arial, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 10.5pt;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.theme-fastfood .item-dots[b-1zhqpd9xje] {
    border-bottom-color: #cc0000;
    opacity: 0.3;
}

.theme-fastfood .price-lunch[b-1zhqpd9xje] {
    color: #ffd700;
    font-family: 'Bebas Neue', 'Impact', 'Arial Black', sans-serif;
    font-weight: 700;
    font-size: 12pt;
}

.theme-fastfood .price-separator[b-1zhqpd9xje] {
    color: #cc0000;
    opacity: 0.6;
}

.theme-fastfood .price-menu[b-1zhqpd9xje] {
    color: #fef9e7;
    font-family: 'Bebas Neue', 'Impact', 'Arial Black', sans-serif;
    font-size: 11pt;
}

.theme-fastfood .price-na[b-1zhqpd9xje] {
    opacity: 0.2;
}

.theme-fastfood .item-description[b-1zhqpd9xje] {
    font-family: Arial, 'Segoe UI', sans-serif;
    color: #d4c5a0;
    opacity: 0.6;
    font-size: 8pt;
}

/* --- Text-only list: bigger images beside text --- */
.theme-fastfood .item-image[b-1zhqpd9xje] {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    border: 2px solid #cc0000;
    box-shadow: 0 2px 8px rgba(204, 0, 0, 0.3);
    overflow: hidden;
    margin-right: 12px;
}

.theme-fastfood .menu-item[b-1zhqpd9xje] {
    margin-bottom: 3mm;
    padding: 2mm 0;
}

/* --- Card Grid: only when fast food + images --- */
.theme-fastfood.with-images .menu-category[b-1zhqpd9xje] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5mm;
    margin-bottom: 4mm;
}

.theme-fastfood.with-images .category-heading[b-1zhqpd9xje],
.theme-fastfood.with-images .category-divider[b-1zhqpd9xje] {
    grid-column: 1 / -1;
}

.theme-fastfood.with-images .menu-item[b-1zhqpd9xje] {
    flex-direction: column;
    align-items: stretch;
    background: #2a2a2e;
    border-radius: 6px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.theme-fastfood.with-images .item-image[b-1zhqpd9xje] {
    width: 100%;
    height: 75px;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid #cc0000;
    box-shadow: none;
    margin: 0;
}

.theme-fastfood.with-images .item-details[b-1zhqpd9xje] {
    padding: 1.5mm 2mm 2mm 2mm;
}

.theme-fastfood.with-images .item-top-row[b-1zhqpd9xje] {
    flex-wrap: wrap;
    gap: 1px;
}

.theme-fastfood.with-images .item-dots[b-1zhqpd9xje] {
    display: none;
}

.theme-fastfood.with-images .item-name[b-1zhqpd9xje] {
    white-space: normal;
    font-size: 8pt;
}

.theme-fastfood.with-images .item-number[b-1zhqpd9xje] {
    font-size: 9pt;
}

.theme-fastfood.with-images .item-prices[b-1zhqpd9xje] {
    width: 100%;
    text-align: right;
    margin-top: 1px;
}

.theme-fastfood.with-images .item-description[b-1zhqpd9xje] {
    display: none;
}

.theme-fastfood.with-images .group-separator[b-1zhqpd9xje] {
    grid-column: 1 / -1;
}

/* Footer */
.theme-fastfood .footer-divider[b-1zhqpd9xje] {
    background: #cc0000;
    height: 2px;
}

.theme-fastfood .footer-text[b-1zhqpd9xje] {
    color: #ffd700;
    font-family: 'Bebas Neue', 'Impact', 'Arial Black', sans-serif;
    font-size: 10pt;
    letter-spacing: 4px;
}

.theme-fastfood .page-number[b-1zhqpd9xje] {
    color: #ffd700;
    opacity: 0.3;
}


/* =========================================================
   THEME: AI Generated (full image — text baked in by AI)
   ========================================================= */
.theme-ai[b-1zhqpd9xje] {
    background: #ffffff;
    padding: 0;
    position: relative;
}

/* The AI-generated image IS the menu — fills the entire A4 page */
.ai-menu-image[b-1zhqpd9xje] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* AI States */
.ai-placeholder[b-1zhqpd9xje],
.ai-error[b-1zhqpd9xje] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: #666;
    padding: 15mm 20mm;
}

.ai-placeholder p[b-1zhqpd9xje],
.ai-error p[b-1zhqpd9xje] {
    margin: 4px 0;
}

.ai-placeholder-sub[b-1zhqpd9xje],
.ai-generating-sub[b-1zhqpd9xje] {
    font-size: 10pt;
    opacity: 0.6;
}

.ai-error-detail[b-1zhqpd9xje] {
    font-size: 10pt;
    color: #c00;
    max-width: 80%;
}

.ai-generating[b-1zhqpd9xje] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: #333;
    padding: 15mm 20mm;
}

.ai-spinner[b-1zhqpd9xje] {
    width: 48px;
    height: 48px;
    border: 4px solid #e0e0e0;
    border-top: 4px solid #2d323e;
    border-radius: 50%;
    animation: ai-spin 1s linear infinite;
    margin-bottom: 16px;
}

@@keyframes ai-spin {
    0%[b-1zhqpd9xje] { transform: rotate(0deg); }
    100%[b-1zhqpd9xje] { transform: rotate(360deg); }
}


/* =========================================================
   PRINT STYLES
   ========================================================= */
@@media print {
    /* Hide controls and sidebar */
    .controls-bar[b-1zhqpd9xje],
    .e-sidebar[b-1zhqpd9xje],
    .dockSidebar[b-1zhqpd9xje],
    .header-section[b-1zhqpd9xje] {
        display: none !important;
    }

    /* Page setup */
    @@page {
        size: A4;
        margin: 10mm 15mm;
    }

    /* Reset container for print */
    .printmenu-container[b-1zhqpd9xje] {
        padding: 0;
        background: none;
        min-height: auto;
    }

    .printmenu-content[b-1zhqpd9xje] {
        max-width: none;
    }

    /* A4 page adjustments */
    .a4-page[b-1zhqpd9xje] {
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        box-shadow: none;
        overflow: visible;
        page-break-after: always;
    }

    .a4-page:last-child[b-1zhqpd9xje] {
        page-break-after: avoid;
    }

    .a4-page + .a4-page[b-1zhqpd9xje] {
        margin-top: 0;
    }

    /* Hide page numbers in print (browser adds its own) */
    .page-number[b-1zhqpd9xje] {
        display: none;
    }

    /* Ensure backgrounds print */
    .a4-page[b-1zhqpd9xje],
    .category-divider[b-1zhqpd9xje],
    .footer-divider[b-1zhqpd9xje] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* bodyContainer should take full width */
    #bodyContainer[b-1zhqpd9xje] {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* AI theme: ensure image prints */
    .theme-ai[b-1zhqpd9xje] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .ai-menu-image[b-1zhqpd9xje] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Hide generation states in print */
    .ai-generating[b-1zhqpd9xje],
    .ai-placeholder[b-1zhqpd9xje],
    .ai-error[b-1zhqpd9xje] {
        display: none !important;
    }

    /* Photo Cards: prevent card splitting across pages */
    .photo-cards[b-1zhqpd9xje]  .photo-card {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .photo-cards .photo-group-header[b-1zhqpd9xje] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
        page-break-after: avoid;
        break-after: avoid;
    }

    .photo-cards[b-1zhqpd9xje]  .photo-card-image img {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Phase 99: Complete print-color-adjust coverage */

    /* Universal fallback — ensures ALL backgrounds print in Chrome without exception */
    *[b-1zhqpd9xje] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Dark theme page backgrounds */
    .theme-contemporary[b-1zhqpd9xje] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .theme-fastfood[b-1zhqpd9xje] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Per-theme dark photo card backgrounds */
    .theme-contemporary.photo-cards[b-1zhqpd9xje]  .photo-card {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .theme-fastfood.photo-cards[b-1zhqpd9xje]  .photo-card {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Fastfood header red background */
    .theme-fastfood .menu-header[b-1zhqpd9xje] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Group header accent backgrounds (rgba tints) */
    .photo-cards .photo-group-header.photo-group-starters[b-1zhqpd9xje] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .photo-cards .photo-group-header.photo-group-sushi[b-1zhqpd9xje] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .photo-cards .photo-group-header.photo-group-bowls[b-1zhqpd9xje] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .photo-cards .photo-group-header.photo-group-wok[b-1zhqpd9xje] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Fastfood group header specific background */
    .theme-fastfood.photo-cards .photo-group-header[b-1zhqpd9xje] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* ==================== Photo Cards Mode ==================== */

/* Photo card base — ::deep required to reach into PrintMenuPhotoCard child component */
.photo-cards[b-1zhqpd9xje]  .photo-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 4px;
    page-break-inside: avoid;
    break-inside: avoid;
    height: 100%;
}

.photo-cards[b-1zhqpd9xje]  .photo-card-image {
    width: 100%;
    height: 30mm;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
}

.photo-cards[b-1zhqpd9xje]  .photo-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
}

/* Per-product image position overrides */
.photo-cards[b-1zhqpd9xje]  .photo-card[data-product="S4"] .photo-card-image img {
    object-position: center 45%;
}

.photo-cards[b-1zhqpd9xje]  .photo-card-info {
    padding: 2mm 3mm 1mm;
}

.photo-cards[b-1zhqpd9xje]  .photo-card-name-row {
    display: flex;
    align-items: baseline;
    gap: 2mm;
}

.photo-cards[b-1zhqpd9xje]  .photo-card-number {
    font-weight: 700;
    font-size: 9pt;
    color: #666;
    flex-shrink: 0;
}

.photo-cards[b-1zhqpd9xje]  .photo-card-name {
    font-weight: 600;
    font-size: 10pt;
    text-overflow: ellipsis;
}

.photo-cards[b-1zhqpd9xje]  .photo-card-price-row {
    text-align: right;
    padding: 1mm 3mm 2mm;
    margin-top: auto;
}

.photo-cards[b-1zhqpd9xje]  .photo-card-price {
    font-size: 9pt;
    font-weight: 500;
    white-space: nowrap;
}

.photo-cards[b-1zhqpd9xje]  .photo-card-desc {
    padding: 0 3mm 2mm;
    font-size: 8pt;
    color: #555;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================================
   PHOTO CARD TYPOGRAPHY HIERARCHY
   Playfair Display for headings, Lato for body text
   ========================================================= */

/* Group headers — serif for elegance */
.photo-cards .photo-group-header[b-1zhqpd9xje] {
    font-family: 'Playfair Display', Georgia, serif;
}

/* Category headings in photo mode — serif */
.photo-cards .category-heading[b-1zhqpd9xje] {
    font-family: 'Playfair Display', Georgia, serif;
}

/* Item name — dominant: bold Lato with tracking */
.photo-cards[b-1zhqpd9xje]  .photo-card-name {
    font-family: 'Lato', 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 10pt;
    letter-spacing: 0.3pt;
}

/* Item description — subordinate: light, italic, muted */
.photo-cards[b-1zhqpd9xje]  .photo-card-desc {
    font-family: 'Lato', 'Segoe UI', sans-serif;
    font-weight: 300;
    font-size: 7.5pt;
    color: #777;
    font-style: italic;
}

/* Item price — de-emphasized: regular weight, muted grey */
.photo-cards[b-1zhqpd9xje]  .photo-card-price {
    font-family: 'Lato', 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 8.5pt;
    color: #888;
}

/* Item number — regular Lato */
.photo-cards[b-1zhqpd9xje]  .photo-card-number {
    font-family: 'Lato', 'Segoe UI', sans-serif;
    font-weight: 400;
}

/* Per-group grid layouts */
.photo-cards .photo-card-grid[b-1zhqpd9xje] {
    display: grid;
    gap: 3mm;
    margin-bottom: 4mm;
}

/* Sushi: 2-column — larger cards for sushi set photos */
.photo-cards .photo-group-sushi .photo-card-grid[b-1zhqpd9xje] {
    grid-template-columns: repeat(2, 1fr);
}

/* Wok: 3-column — more items, portrait-style photos */
.photo-cards .photo-group-wok .photo-card-grid[b-1zhqpd9xje] {
    grid-template-columns: repeat(3, 1fr);
    gap: 2mm;
}

/* Starters: 2-column — feature card style */
.photo-cards .photo-group-starters .photo-card-grid[b-1zhqpd9xje] {
    grid-template-columns: repeat(2, 1fr);
}

/* Bowls: 2-column — top-down poke bowl photos */
.photo-cards .photo-group-bowls .photo-card-grid[b-1zhqpd9xje] {
    grid-template-columns: repeat(2, 1fr);
}

/* Unknown/fallback: 2-column */
.photo-cards .photo-group-unknown .photo-card-grid[b-1zhqpd9xje] {
    grid-template-columns: repeat(2, 1fr);
}

/* Smaller cards in 3-column wok grid — ::deep for child component */
.photo-cards .photo-group-wok[b-1zhqpd9xje]  .photo-card-image {
    height: 28mm;
}

.photo-cards .photo-group-wok[b-1zhqpd9xje]  .photo-card-name {
    font-size: 9pt;
}

.photo-cards .photo-group-wok[b-1zhqpd9xje]  .photo-card-price {
    font-size: 8pt;
}

.photo-cards .photo-group-wok[b-1zhqpd9xje]  .photo-card-desc {
    font-size: 7pt;
    -webkit-line-clamp: 1;
}

/* Showcase categories (own page, few items) — taller images to fill space */
.photo-cards .photo-cat-pokebowl[b-1zhqpd9xje]  .photo-card-image,
.photo-cards .photo-cat-baobuns[b-1zhqpd9xje]  .photo-card-image {
    height: 58mm;
}

/* Group headers */
.photo-cards .photo-group-header[b-1zhqpd9xje] {
    padding: 3mm 4mm;
    margin: 4mm 0 2mm;
    border-left: 3mm solid #999;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.photo-cards .photo-group-header .photo-group-title[b-1zhqpd9xje] {
    font-size: 14pt;
    font-weight: 700;
    letter-spacing: 0.5pt;
    text-transform: uppercase;
}

/* Accent colors — warm food palette */
.photo-cards .photo-group-header.photo-group-starters[b-1zhqpd9xje] {
    border-left-color: #e8a87c;
    background: rgba(232, 168, 124, 0.06);
}

.photo-cards .photo-group-header.photo-group-sushi[b-1zhqpd9xje] {
    border-left-color: #7cb9e8;
    background: rgba(124, 185, 232, 0.06);
}

.photo-cards .photo-group-header.photo-group-bowls[b-1zhqpd9xje] {
    border-left-color: #a8d5a2;
    background: rgba(168, 213, 162, 0.06);
}

.photo-cards .photo-group-header.photo-group-wok[b-1zhqpd9xje] {
    border-left-color: #e87c7c;
    background: rgba(232, 124, 124, 0.06);
}

/* Text fallback in PhotoCards mode — no dot leaders */
.photo-cards .photo-text-fallback[b-1zhqpd9xje] {
    padding: 1mm 3mm;
    border-bottom: 0.3pt solid #eee;
}

.photo-cards .photo-text-fallback .item-top-row[b-1zhqpd9xje] {
    display: flex;
    align-items: baseline;
    gap: 2mm;
}

.photo-cards .photo-text-fallback .item-dots[b-1zhqpd9xje] {
    display: none;
}

/* Suppress dot leaders globally in PhotoCards mode */
.photo-cards .item-dots[b-1zhqpd9xje] {
    display: none;
}

/* Category headings span full grid width */
.photo-cards .category-heading[b-1zhqpd9xje],
.photo-cards .category-divider[b-1zhqpd9xje] {
    grid-column: 1 / -1;
}

/* Group separator hidden in PhotoCards (group headers replace them) */
.photo-cards .group-separator[b-1zhqpd9xje] {
    display: none;
}

/* =========================================================
   PER-THEME PHOTO CARD OVERRIDES
   Print-safe: weights, colors, borders, spacing only.
   No box-shadow. No linear-gradient. Rgba tints are flat.
   ========================================================= */

/* ---------------------------------------------------------
   THEME 1: Japanese — warm, minimal, wabi-sabi
   --------------------------------------------------------- */
.theme-japanese.photo-cards[b-1zhqpd9xje]  .photo-card {
    border: 0.5pt solid #d4c5a9;
}

.theme-japanese.photo-cards[b-1zhqpd9xje]  .photo-card-name {
    font-weight: 600;
    color: #4a4238;
    letter-spacing: 0.5pt;
}

.theme-japanese.photo-cards[b-1zhqpd9xje]  .photo-card-price {
    color: #c17c4e;
}

.theme-japanese.photo-cards[b-1zhqpd9xje]  .photo-card-desc {
    color: #8a7d6b;
    font-style: normal;
}

.theme-japanese.photo-cards .photo-group-header[b-1zhqpd9xje] {
    font-weight: 400;
    letter-spacing: 2pt;
    text-transform: uppercase;
    font-size: 11pt;
}

/* ---------------------------------------------------------
   THEME 2: Elegant — refined, luxurious, classic fine dining
   --------------------------------------------------------- */
.theme-elegant.photo-cards[b-1zhqpd9xje]  .photo-card {
    border: 1pt double #b8860b;
}

.theme-elegant.photo-cards[b-1zhqpd9xje]  .photo-card-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.2pt;
}

.theme-elegant.photo-cards[b-1zhqpd9xje]  .photo-card-price {
    color: #b8860b;
    font-weight: 300;
}

.theme-elegant.photo-cards[b-1zhqpd9xje]  .photo-card-desc {
    color: #666;
    font-style: italic;
}

.theme-elegant.photo-cards .photo-group-header[b-1zhqpd9xje] {
    font-weight: 700;
    font-style: italic;
    border-left: 3pt solid #b8860b;
}

/* ---------------------------------------------------------
   THEME 3: Contemporary — dark, urban, modern
   --------------------------------------------------------- */
.theme-contemporary.photo-cards[b-1zhqpd9xje]  .photo-card {
    border: 0.5pt solid #444;
    background: #2a2a2e;
    color: #f0f0f0;
}

.theme-contemporary.photo-cards[b-1zhqpd9xje]  .photo-card-name {
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5pt;
    text-transform: uppercase;
    font-size: 9pt;
}

.theme-contemporary.photo-cards[b-1zhqpd9xje]  .photo-card-price {
    color: #8ecae6;
}

.theme-contemporary.photo-cards[b-1zhqpd9xje]  .photo-card-desc {
    color: #999;
    font-weight: 300;
}

.theme-contemporary.photo-cards .photo-group-header[b-1zhqpd9xje] {
    color: #8ecae6;
    font-weight: 700;
    letter-spacing: 3pt;
    text-transform: uppercase;
    border-left-color: #8ecae6;
}

.theme-contemporary.photo-cards .photo-text-fallback[b-1zhqpd9xje] {
    border-bottom-color: #444;
}

/* ---------------------------------------------------------
   THEME 4: Scandinavian — clean, minimal, lots of white space
   --------------------------------------------------------- */
.theme-scandinavian.photo-cards[b-1zhqpd9xje]  .photo-card {
    border: none;
    border-bottom: 1pt solid #e0e0e0;
}

.theme-scandinavian.photo-cards[b-1zhqpd9xje]  .photo-card-name {
    font-weight: 400;
    letter-spacing: 1pt;
    text-transform: uppercase;
    font-size: 8.5pt;
}

.theme-scandinavian.photo-cards[b-1zhqpd9xje]  .photo-card-price {
    color: #999;
    font-weight: 300;
}

.theme-scandinavian.photo-cards[b-1zhqpd9xje]  .photo-card-desc {
    color: #aaa;
    font-weight: 300;
    font-style: normal;
}

.theme-scandinavian.photo-cards .photo-group-header[b-1zhqpd9xje] {
    font-weight: 300;
    letter-spacing: 4pt;
    text-transform: uppercase;
    font-size: 10pt;
    border-left: none;
    padding-left: 0;
    border-bottom: 0.5pt solid #ccc;
    padding-bottom: 1mm;
}

/* ---------------------------------------------------------
   THEME 5: Fast Food / Asian Street — bold, energetic, dark
   --------------------------------------------------------- */
.theme-fastfood.photo-cards[b-1zhqpd9xje]  .photo-card {
    border: 2pt solid #cc0000;
    background: #2a2a2e;
    color: #f0f0f0;
}

.theme-fastfood.photo-cards[b-1zhqpd9xje]  .photo-card-name {
    font-family: 'Bebas Neue', 'Impact', sans-serif;
    font-weight: 700;
    color: #ffd700;
    font-size: 11pt;
    letter-spacing: 1pt;
    text-transform: uppercase;
}

.theme-fastfood.photo-cards[b-1zhqpd9xje]  .photo-card-price {
    color: #cc0000;
    font-weight: 700;
    font-size: 10pt;
}

.theme-fastfood.photo-cards[b-1zhqpd9xje]  .photo-card-desc {
    color: #ccc;
    font-family: Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 7pt;
}

.theme-fastfood.photo-cards .photo-group-header[b-1zhqpd9xje] {
    font-family: 'Bebas Neue', 'Impact', sans-serif;
    color: #ffd700;
    font-size: 16pt;
    letter-spacing: 4pt;
    text-transform: uppercase;
    border-left-color: #cc0000;
    background: rgba(204, 0, 0, 0.15);
}

.theme-fastfood.photo-cards .photo-text-fallback[b-1zhqpd9xje] {
    border-bottom-color: #444;
}

/* ===== Sushi Set Section — Theme Overrides ===== */

/* Japanese theme */
.theme-japanese.photo-cards[b-1zhqpd9xje]  .sushi-table th {
    color: #8b7355;
}

.theme-japanese.photo-cards[b-1zhqpd9xje]  .sushi-table thead tr {
    border-bottom-color: #8b7355;
}

.theme-japanese.photo-cards[b-1zhqpd9xje]  .sushi-hero {
    border-radius: 2px;
}

/* Elegant theme */
.theme-elegant.photo-cards[b-1zhqpd9xje]  .sushi-table {
    font-family: 'Georgia', 'Times New Roman', serif;
}

.theme-elegant.photo-cards[b-1zhqpd9xje]  .sushi-table thead tr {
    border-bottom-color: #999;
}

.theme-elegant.photo-cards[b-1zhqpd9xje]  .sushi-table th {
    font-style: italic;
}

/* Contemporary theme */
.theme-contemporary.photo-cards[b-1zhqpd9xje]  .sushi-table {
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
}

.theme-contemporary.photo-cards[b-1zhqpd9xje]  .sushi-table thead tr {
    border-bottom: 2px solid #222;
}

.theme-contemporary.photo-cards[b-1zhqpd9xje]  .sushi-table th {
    color: #222;
    font-weight: 800;
    text-transform: uppercase;
}

.theme-contemporary.photo-cards[b-1zhqpd9xje]  .col-number {
    color: #000;
}

.theme-contemporary.photo-cards[b-1zhqpd9xje]  .sushi-hero {
    border-radius: 0;
}

/* Scandinavian theme */
.theme-scandinavian.photo-cards[b-1zhqpd9xje]  .sushi-table thead tr {
    border-bottom-color: #ddd;
}

.theme-scandinavian.photo-cards[b-1zhqpd9xje]  .sushi-table th {
    color: #aaa;
    font-weight: 400;
}

.theme-scandinavian.photo-cards[b-1zhqpd9xje]  .sushi-hero {
    border-radius: 6px;
}

/* Fast food / Asian Street Food theme */
.theme-fastfood.photo-cards[b-1zhqpd9xje]  .sushi-table {
    font-family: 'Nunito', 'Helvetica Neue', sans-serif;
}

.theme-fastfood.photo-cards[b-1zhqpd9xje]  .sushi-table thead tr {
    border-bottom: 2px solid #e63946;
}

.theme-fastfood.photo-cards[b-1zhqpd9xje]  .sushi-table th {
    color: #e63946;
    font-weight: 700;
}

.theme-fastfood.photo-cards[b-1zhqpd9xje]  .col-number {
    color: #e63946;
    font-weight: 800;
}

.theme-fastfood.photo-cards[b-1zhqpd9xje]  .veg-divider::before,
.theme-fastfood.photo-cards[b-1zhqpd9xje]  .veg-divider::after {
    background: #2d6a4f;
}


/* =========================================================
   CROP EDITOR PANEL
   Inline editor that expands below photo cards in PhotoCards mode.
   Styles via ::deep so they reach the PhotoCropEditorPanel child.
   ========================================================= */

/* Photo card wrapper: makes the card clickable */
.photo-card-wrapper[b-1zhqpd9xje] {
    cursor: pointer;
    position: relative;
}

.photo-card-wrapper:hover[b-1zhqpd9xje]  .photo-card {
    outline: 2px solid #2d323e;
    outline-offset: 1px;
}

/* Crop modal overlay */
.crop-modal-overlay[b-1zhqpd9xje] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: crop-fade-in 0.15s ease-out;
}

.crop-modal[b-1zhqpd9xje] {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 700px;
    width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    animation: crop-slide-up 0.2s ease-out;
}

.crop-modal-header[b-1zhqpd9xje] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e9ecef;
}

.crop-modal-title[b-1zhqpd9xje] {
    font-weight: 600;
    font-size: 16px;
    color: #2d323e;
}

.crop-modal-close[b-1zhqpd9xje] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: #666;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 4px;
    transition: background 0.15s;
}

.crop-modal-close:hover[b-1zhqpd9xje] {
    background: #e9ecef;
    color: #333;
}

.crop-modal-body[b-1zhqpd9xje] {
    padding: 20px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.crop-modal-preview[b-1zhqpd9xje] {
    flex: 1;
    min-width: 0;
}

.crop-preview-frame[b-1zhqpd9xje] {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f0;
}

.crop-preview-frame img[b-1zhqpd9xje] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.crop-modal-controls[b-1zhqpd9xje] {
    width: 240px;
    flex-shrink: 0;
}

/* Style the panel inside the modal */
.crop-modal-controls[b-1zhqpd9xje]  .crop-editor-panel {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

.crop-modal-controls[b-1zhqpd9xje]  .crop-editor-header {
    display: none;
}

.crop-modal-controls[b-1zhqpd9xje]  .crop-editor-sliders {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.crop-modal-controls[b-1zhqpd9xje]  .crop-slider-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.crop-modal-controls[b-1zhqpd9xje]  .crop-slider-label {
    font-size: 12px;
    color: #555;
    font-weight: 500;
    width: auto;
}

.crop-modal-controls[b-1zhqpd9xje]  .crop-slider-row input[type="range"] {
    width: 100%;
    height: 20px;
    cursor: pointer;
    accent-color: #2d323e;
}

.crop-modal-controls[b-1zhqpd9xje]  .crop-slider-value {
    font-size: 12px;
    color: #444;
    width: auto;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.crop-modal-controls[b-1zhqpd9xje]  .crop-editor-footer {
    display: flex;
    align-items: center;
    gap: 10px;
}

.crop-modal-controls[b-1zhqpd9xje]  .crop-editor-reset {
    padding: 6px 14px;
    border: 1px solid #adb5bd;
    border-radius: 4px;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
    color: #495057;
    transition: background 0.15s;
}

.crop-modal-controls[b-1zhqpd9xje]  .crop-editor-reset:hover {
    background: #e9ecef;
}

.crop-modal-controls[b-1zhqpd9xje]  .crop-editor-error {
    font-size: 12px;
    color: #c0392b;
}

@@keyframes crop-fade-in {
    from[b-1zhqpd9xje] { opacity: 0; }
    to[b-1zhqpd9xje]   { opacity: 1; }
}

@@keyframes crop-slide-up {
    from[b-1zhqpd9xje] { opacity: 0; transform: translateY(20px); }
    to[b-1zhqpd9xje]   { opacity: 1; transform: translateY(0); }
}

/* Responsive: stack on narrow screens */
@@media (max-width: 600px) {
    .crop-modal-body[b-1zhqpd9xje] {
        flex-direction: column;
    }
    .crop-modal-controls[b-1zhqpd9xje] {
        width: 100%;
    }
}

/* Hide crop modal on print */
@@media print {
    .crop-modal-overlay[b-1zhqpd9xje] {
        display: none !important;
    }

    .photo-card-wrapper[b-1zhqpd9xje] {
        cursor: default;
    }
}
/* /Pages/PrintMenu/PrintMenuSushiSetSection.razor.rz.scp.css */
/* ===== Sushi Set Section ===== */
.sushi-set-section[b-5034z3rs3a] {
    margin-bottom: 4mm;
}

/* Hero image */
.sushi-hero[b-5034z3rs3a] {
    width: 100%;
    height: 40mm;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 3mm;
}

.sushi-hero img[b-5034z3rs3a] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Table */
.sushi-table[b-5034z3rs3a] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Lato', 'Helvetica Neue', sans-serif;
    font-size: 9pt;
}

.sushi-table thead tr[b-5034z3rs3a] {
    border-bottom: 1.5px solid #c89b3c;
}

.sushi-table th[b-5034z3rs3a] {
    padding: 1.5mm 2mm;
    font-weight: 600;
    font-size: 8pt;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sushi-table td[b-5034z3rs3a] {
    padding: 1.5mm 2mm;
    border-bottom: 0.5px solid #eee;
}

.col-number[b-5034z3rs3a] {
    width: 10mm;
    font-weight: 700;
    color: #333;
}

.col-contents[b-5034z3rs3a] {
    text-align: left;
    color: #555;
    font-size: 8.5pt;
    line-height: 1.3;
}

.col-price[b-5034z3rs3a] {
    width: 16mm;
    text-align: right;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
}

th.col-price[b-5034z3rs3a] {
    text-align: right;
}

th.col-number[b-5034z3rs3a] {
    text-align: left;
}

/* Vegetarian separator */
.veg-separator td[b-5034z3rs3a] {
    padding: 2mm 0 1mm;
    border-bottom: none;
}

.veg-divider[b-5034z3rs3a] {
    display: flex;
    align-items: center;
    gap: 3mm;
}

.veg-divider[b-5034z3rs3a]::before,
.veg-divider[b-5034z3rs3a]::after {
    content: '';
    flex: 1;
    height: 0.5px;
    background: #4a7c4a;
}

.veg-label[b-5034z3rs3a] {
    font-size: 7pt;
    color: #4a7c4a;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* Vegetarian row accents */
.veg-row .col-number[b-5034z3rs3a] {
    color: #4a7c4a;
}

.veg-row .col-price[b-5034z3rs3a] {
    color: #4a7c4a;
}
/* /Pages/PrivacyPolicy.razor.rz.scp.css */
.legal-page[b-n93jj3kqq7] {
    min-height: 100vh;
    background-color: #f8f9fa;
    padding: 24px 16px;
}

.legal-container[b-n93jj3kqq7] {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    padding: 32px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.legal-container h1[b-n93jj3kqq7] {
    font-size: 1.75rem;
    color: #212529;
    margin-bottom: 4px;
}

.last-updated[b-n93jj3kqq7] {
    color: #6c757d;
    font-size: 0.875rem;
    margin-bottom: 32px;
}

.legal-container section[b-n93jj3kqq7] {
    margin-bottom: 24px;
}

.legal-container h2[b-n93jj3kqq7] {
    font-size: 1.2rem;
    color: #343a40;
    margin-bottom: 12px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e9ecef;
}

.legal-container h3[b-n93jj3kqq7] {
    font-size: 1rem;
    color: #495057;
    margin-bottom: 8px;
    margin-top: 16px;
}

.legal-container p[b-n93jj3kqq7] {
    color: #495057;
    line-height: 1.6;
    margin-bottom: 12px;
}

.legal-container ul[b-n93jj3kqq7] {
    color: #495057;
    line-height: 1.6;
    padding-left: 24px;
    margin-bottom: 12px;
}

.legal-container li[b-n93jj3kqq7] {
    margin-bottom: 6px;
}

.legal-container a[b-n93jj3kqq7] {
    color: #28a745;
}

.legal-footer[b-n93jj3kqq7] {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

.back-link[b-n93jj3kqq7] {
    color: #28a745;
    text-decoration: none;
    font-size: 0.9rem;
}

.back-link:hover[b-n93jj3kqq7] {
    text-decoration: underline;
}

.separator[b-n93jj3kqq7] {
    color: #dee2e6;
    margin: 0 12px;
}
/* /Pages/ProductPage.razor.rz.scp.css */
/* Product Page - Mobile First */

.product-page[b-l78a4epit0] {
    min-height: 100vh;
    background-color: #f8f9fa;
    padding: 16px;
}

/* Loading State */
.loading-container[b-l78a4epit0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    color: #666;
}

.loading-spinner[b-l78a4epit0] {
    width: 40px;
    height: 40px;
    border: 3px solid #e9ecef;
    border-top-color: #28a745;
    border-radius: 50%;
    animation: spin-b-l78a4epit0 1s linear infinite;
}

@keyframes spin-b-l78a4epit0 {
    to { transform: rotate(360deg); }
}

/* Error State */
.error-container[b-l78a4epit0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    text-align: center;
    padding: 24px;
}

.error-icon[b-l78a4epit0] {
    width: 64px;
    height: 64px;
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 16px;
}

.error-container h1[b-l78a4epit0] {
    font-size: 24px;
    margin: 0 0 8px;
    color: #212529;
}

.error-container p[b-l78a4epit0] {
    color: #666;
    margin: 0 0 24px;
}

/* Product Content */
.product-content[b-l78a4epit0] {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Image Section */
.image-section[b-l78a4epit0] {
    background: #f8f9fa;
}

.main-image-container[b-l78a4epit0] {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.main-image[b-l78a4epit0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail-gallery[b-l78a4epit0] {
    display: flex;
    gap: 8px;
    padding: 12px;
    overflow-x: auto;
    background: white;
}

.thumbnail[b-l78a4epit0] {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    flex-shrink: 0;
    transition: border-color 0.2s;
}

.thumbnail:hover[b-l78a4epit0] {
    border-color: #dee2e6;
}

.thumbnail.selected[b-l78a4epit0] {
    border-color: #28a745;
}

/* Details Section */
.details-section[b-l78a4epit0] {
    padding: 20px;
}

.product-name[b-l78a4epit0] {
    font-size: 24px;
    font-weight: 600;
    color: #212529;
    margin: 0 0 12px;
    line-height: 1.3;
}

.price-section[b-l78a4epit0] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}

.price[b-l78a4epit0] {
    font-size: 28px;
    font-weight: 700;
    color: #28a745;
}

.lunch-price[b-l78a4epit0] {
    font-size: 16px;
    color: #6c757d;
    background: #f8f9fa;
    padding: 4px 8px;
    border-radius: 4px;
}

.description[b-l78a4epit0] {
    margin-bottom: 20px;
}

.description p[b-l78a4epit0] {
    color: #495057;
    line-height: 1.6;
    margin: 0;
}

/* Allergen Section */
.allergen-section[b-l78a4epit0] {
    margin-bottom: 20px;
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
}

.allergen-section h3[b-l78a4epit0] {
    font-size: 14px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px;
}

.allergen-list[b-l78a4epit0] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.allergen-badge[b-l78a4epit0] {
    background: #fff3cd;
    color: #856404;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

/* Action Section */
.action-section[b-l78a4epit0] {
    max-width: 800px;
    margin: 20px auto 0;
    padding: 0 16px;
}

.back-button[b-l78a4epit0] {
    width: 100%;
    padding: 14px 24px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.back-button:hover[b-l78a4epit0] {
    background: #218838;
}

/* Tablet and Desktop */
@media (min-width: 768px) {
    .product-page[b-l78a4epit0] {
        padding: 32px;
    }

    .product-content[b-l78a4epit0] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .main-image-container[b-l78a4epit0] {
        aspect-ratio: 1;
    }

    .thumbnail[b-l78a4epit0] {
        width: 80px;
        height: 80px;
    }

    .details-section[b-l78a4epit0] {
        padding: 32px;
        display: flex;
        flex-direction: column;
    }

    .product-name[b-l78a4epit0] {
        font-size: 32px;
    }

    .action-section[b-l78a4epit0] {
        padding: 0;
    }

    .back-button[b-l78a4epit0] {
        width: auto;
        min-width: 200px;
    }
}
/* /Pages/QLink.razor.rz.scp.css */
.qlink-page[b-fxm46o2c2p] {
    min-height: 100vh;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--space-12) var(--space-4);
}

.qlink-card[b-fxm46o2c2p] {
    max-width: 420px;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-5);
    box-shadow: var(--elevation-2);
    padding: var(--space-6) var(--space-4);
}

@keyframes qlink-pulse-b-fxm46o2c2p {
    0%   { opacity: 1; }
    50%  { opacity: 0.4; }
    100% { opacity: 1; }
}

/* MUST use var(--motion-duration) — NOT 1.4s hardcoded.
   DS @media (prefers-reduced-motion: reduce) sets --motion-duration to var(--dur-instant) (0ms).
   This pauses animation automatically for users with that preference. */
.skeleton-block[b-fxm46o2c2p] {
    background: var(--accent-soft);
    border-radius: var(--radius-2);
    animation: qlink-pulse-b-fxm46o2c2p var(--motion-duration) ease-in-out infinite;
    margin-bottom: var(--space-3);
}

.sk-title[b-fxm46o2c2p]  { height: 24px; width: 60%; animation-delay: 0s; }
.sk-image[b-fxm46o2c2p]  { height: 120px; width: 100%; border-radius: var(--radius-3); animation-delay: 0.1s; }
.sk-body[b-fxm46o2c2p]   { height: 14px; width: 90%; animation-delay: 0.2s; }
.sk-button[b-fxm46o2c2p] { height: 44px; width: 100%; animation-delay: 0.3s; margin-top: var(--space-4); }

.terminal-heading[b-fxm46o2c2p] {
    font-size: var(--size-700);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    padding: var(--space-8) var(--space-6);
    text-align: center;
}
/* /Pages/QLinkDetailPage.razor.rz.scp.css */
.qlinks-detail-grid[b-g9tgrjb5v8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 768px) {
    .qlinks-detail-grid[b-g9tgrjb5v8] {
        grid-template-columns: 1fr;
    }
}

.response-pagination[b-g9tgrjb5v8] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.duplicate-toast[b-g9tgrjb5v8] {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: 1000;
}
/* /Pages/QLinksPage.razor.rz.scp.css */
.qlinks-filter-bar[b-8cz6it7au6] {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.duplicate-toast[b-8cz6it7au6] {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: 1000;
}
/* /Pages/QueuePage.razor.rz.scp.css */
.ViewPort[b-tdk4ftpy3d] {
    padding: 1rem;
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    padding-bottom: 100px;
    padding-bottom: 5px;
}

/*Both*/
/*.CardBottomMargin {
    padding-bottom: 5px;
    vertical-align: top;
}*/

/*Both*/
/*.Frontier-Queue {*/
    /*background-color: #92CDFA;*/
    /*padding: 0 0.2em;
    font-size: 3em;
}

.WaitingMinutesDropddown {
    background-color: #cccccc;
    position: fixed;
    right: 120px;
    top: 10px;
    z-index: 101;
    width: 150px;
}*/
/* /Pages/RestaurantPage.razor.rz.scp.css */
/* ============================================================
   RestaurantPage — MUKBANG ghost restaurant detail
   Dark theme, mobile-first, no images (text-heavy layout)
   ============================================================ */

:root[b-o79sn7wwoi] {
    --rp-bg: #111113;
    --rp-surface: #1c1c1e;
    --rp-border: #3a3a3c;
    --rp-text: #f2f2f7;
    --rp-muted: #8e8e93;
    --rp-accent: #f5a623;
    --rp-link: #0a84ff;
    --rp-success: #30d158;
    --rp-danger: #ff453a;
    --rp-radius: 10px;
    --rp-spacing: 1.5rem;
}

/* Page wrapper */
.restaurant-page[b-o79sn7wwoi] {
    min-height: 100vh;
    background-color: var(--rp-bg);
    color: var(--rp-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

/* Content container */
.restaurant-content[b-o79sn7wwoi] {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem var(--rp-spacing) 4rem;
}

/* ---- Loading / Error ---- */

.loading-container[b-o79sn7wwoi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    color: var(--rp-muted);
}

.loading-spinner[b-o79sn7wwoi] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--rp-border);
    border-top-color: var(--rp-accent);
    border-radius: 50%;
    animation: spin-b-o79sn7wwoi 0.8s linear infinite;
}

@keyframes spin-b-o79sn7wwoi {
    to { transform: rotate(360deg); }
}

.error-container[b-o79sn7wwoi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    text-align: center;
    padding: 2rem;
    max-width: 480px;
    margin: 0 auto;
}

.error-icon[b-o79sn7wwoi] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--rp-danger);
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Back nav ---- */

.back-nav[b-o79sn7wwoi] {
    margin-bottom: 1.5rem;
    padding-top: 0.5rem;
}

.back-link[b-o79sn7wwoi] {
    background: none;
    border: none;
    color: var(--rp-link);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: opacity 0.15s ease;
}

.back-link:hover[b-o79sn7wwoi] {
    opacity: 0.8;
}

.back-button[b-o79sn7wwoi] {
    background-color: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-radius: 6px;
    color: var(--rp-text);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.5rem 1.25rem;
    transition: border-color 0.15s ease;
}

.back-button:hover[b-o79sn7wwoi] {
    border-color: var(--rp-text);
}

/* ---- Restaurant header ---- */

.restaurant-header[b-o79sn7wwoi] {
    margin-bottom: var(--rp-spacing);
    padding-bottom: var(--rp-spacing);
    border-bottom: 1px solid var(--rp-border);
}

.header-top[b-o79sn7wwoi] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.restaurant-name[b-o79sn7wwoi] {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    flex: 1 1 auto;
}

.cuisine-badge[b-o79sn7wwoi] {
    background-color: rgba(245, 166, 35, 0.15);
    border: 1px solid rgba(245, 166, 35, 0.35);
    border-radius: 20px;
    color: var(--rp-accent);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.2rem 0.75rem;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.4rem;
}

.price-tier[b-o79sn7wwoi],
.lunch-price-badge[b-o79sn7wwoi] {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--rp-muted);
    margin-right: 1rem;
}

.lunch-price-badge[b-o79sn7wwoi] {
    background-color: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-radius: 4px;
    color: var(--rp-text);
    padding: 0.15rem 0.5rem;
}

/* ---- Info section ---- */

.info-section[b-o79sn7wwoi] {
    margin-bottom: var(--rp-spacing);
    padding-bottom: var(--rp-spacing);
    border-bottom: 1px solid var(--rp-border);
}

.info-row[b-o79sn7wwoi] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    font-size: 0.95rem;
}

.info-icon[b-o79sn7wwoi] {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1.6;
}

.info-link[b-o79sn7wwoi] {
    color: var(--rp-link);
    text-decoration: none;
    word-break: break-word;
}

.info-link:hover[b-o79sn7wwoi] {
    text-decoration: underline;
}

.info-text[b-o79sn7wwoi] {
    color: var(--rp-text);
    word-break: break-word;
}

.social-row[b-o79sn7wwoi] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.social-link[b-o79sn7wwoi] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background-color: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-radius: 6px;
    color: var(--rp-text);
    font-size: 0.85rem;
    padding: 0.3rem 0.75rem;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.social-link:hover[b-o79sn7wwoi] {
    border-color: var(--rp-accent);
}

/* ---- Opening hours ---- */

.hours-section[b-o79sn7wwoi] {
    margin-bottom: var(--rp-spacing);
    padding-bottom: var(--rp-spacing);
    border-bottom: 1px solid var(--rp-border);
}

.section-title[b-o79sn7wwoi] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    color: var(--rp-text);
}

.hours-table[b-o79sn7wwoi] {
    width: 100%;
    border-collapse: collapse;
}

.hours-row td[b-o79sn7wwoi] {
    padding: 0.4rem 0.5rem;
    font-size: 0.9rem;
}

.hours-row:nth-child(odd) td[b-o79sn7wwoi] {
    background-color: rgba(255, 255, 255, 0.03);
}

.hours-day[b-o79sn7wwoi] {
    font-weight: 500;
    width: 130px;
    color: var(--rp-text);
}

.hours-time[b-o79sn7wwoi] {
    color: var(--rp-muted);
}

/* ---- Menu section ---- */

.menu-section[b-o79sn7wwoi] {
    margin-bottom: var(--rp-spacing);
}

.menu-empty[b-o79sn7wwoi] {
    color: var(--rp-muted);
    font-style: italic;
    font-size: 0.95rem;
}

.menu-category[b-o79sn7wwoi] {
    margin-bottom: 2rem;
}

.category-header[b-o79sn7wwoi] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rp-accent);
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(245, 166, 35, 0.25);
}

.menu-item[b-o79sn7wwoi] {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rp-border);
}

.menu-item:last-child[b-o79sn7wwoi] {
    border-bottom: none;
}

.menu-item-main[b-o79sn7wwoi] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.menu-item-name[b-o79sn7wwoi] {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--rp-text);
    flex: 1;
}

.menu-item-price[b-o79sn7wwoi] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rp-accent);
    white-space: nowrap;
    flex-shrink: 0;
}

.menu-item-description[b-o79sn7wwoi] {
    margin: 0.3rem 0 0 0;
    font-size: 0.875rem;
    color: var(--rp-muted);
    line-height: 1.5;
}

/* ---- Responsive ---- */

@media (max-width: 480px) {
    .restaurant-content[b-o79sn7wwoi] {
        padding: 0.75rem 1rem 3rem;
    }

    .restaurant-name[b-o79sn7wwoi] {
        font-size: 1.5rem;
    }

    .header-top[b-o79sn7wwoi] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .cuisine-badge[b-o79sn7wwoi] {
        margin-top: 0;
    }

    .hours-day[b-o79sn7wwoi] {
        width: 100px;
    }
}
/* /Pages/RestaurantSignalsAdminPage.razor.rz.scp.css */
/* ── Container ──────────────────────────────────────────── */
.signals-admin-container[b-qj7b8k2vkr] {
    padding: 0 16px;
    background: var(--bg-primary, #f8f9fa);
    min-height: 100vh;
}

.signals-admin-content[b-qj7b8k2vkr] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 0 48px;
}

/* ── Page Header ────────────────────────────────────────── */
.signals-page-header[b-qj7b8k2vkr] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
}

.signals-page-title[b-qj7b8k2vkr] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--text-primary, #1a1a2e);
}

.signals-page-subtitle[b-qj7b8k2vkr] {
    font-size: 0.9rem;
    color: var(--text-muted, #6c757d);
    margin: 0;
}

/* ── Refresh Button ─────────────────────────────────────── */
.btn-refresh[b-qj7b8k2vkr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--accent, #00d4aa);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, opacity 0.2s;
}

.btn-refresh:hover:not(:disabled)[b-qj7b8k2vkr] {
    background: #00b894;
}

.btn-refresh:disabled[b-qj7b8k2vkr],
.btn-refresh--loading[b-qj7b8k2vkr] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ── Summary Stats ──────────────────────────────────────── */
.signals-stats-row[b-qj7b8k2vkr] {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.signals-stat-card[b-qj7b8k2vkr] {
    flex: 1;
    min-width: 140px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 16px 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.signals-stat-card--highlight[b-qj7b8k2vkr] {
    border-color: #00d4aa;
    background: #f0fdf9;
}

.signals-stat-card--claimed[b-qj7b8k2vkr] {
    border-color: #28a745;
    background: #f0fdf4;
}

.signals-stat-value[b-qj7b8k2vkr] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary, #1a1a2e);
    line-height: 1;
    margin-bottom: 6px;
}

.signals-stat-label[b-qj7b8k2vkr] {
    font-size: 0.8rem;
    color: var(--text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Loading / Error / Empty States ────────────────────── */
.signals-loading[b-qj7b8k2vkr],
.signals-error[b-qj7b8k2vkr],
.signals-empty[b-qj7b8k2vkr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 24px;
    text-align: center;
    color: var(--text-muted, #6c757d);
}

.signals-error[b-qj7b8k2vkr] {
    color: #dc3545;
}

.signals-loading i[b-qj7b8k2vkr],
.signals-empty i[b-qj7b8k2vkr] {
    font-size: 2.5rem;
    opacity: 0.4;
}

.signals-error i[b-qj7b8k2vkr] {
    font-size: 2rem;
}

/* ── Table Wrapper ──────────────────────────────────────── */
.signals-table-wrapper[b-qj7b8k2vkr] {
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: #fff;
}

/* ── Table ──────────────────────────────────────────────── */
.signals-table[b-qj7b8k2vkr] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.signals-table thead[b-qj7b8k2vkr] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f8f9fa;
}

.signals-table th[b-qj7b8k2vkr] {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    border-bottom: 2px solid #e9ecef;
    white-space: nowrap;
}

.signals-table td[b-qj7b8k2vkr] {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

/* Zebra striping */
.signals-table tbody tr:nth-child(even)[b-qj7b8k2vkr] {
    background: #fafafa;
}

.signals-table tbody tr:hover[b-qj7b8k2vkr] {
    background: #f0fdf9;
}

/* Claimed row tint */
.signals-table tbody tr.row-claimed[b-qj7b8k2vkr] {
    background: #f6fff8;
}

.signals-table tbody tr.row-claimed:nth-child(even)[b-qj7b8k2vkr] {
    background: #edfff2;
}

/* ── Column Widths ──────────────────────────────────────── */
.col-rank[b-qj7b8k2vkr] {
    width: 48px;
    text-align: center;
    color: #adb5bd;
    font-weight: 600;
}

.col-name[b-qj7b8k2vkr] {
    min-width: 200px;
}

.col-circles[b-qj7b8k2vkr],
.col-people[b-qj7b8k2vkr],
.col-wins[b-qj7b8k2vkr] {
    width: 90px;
    text-align: center;
}

.col-status[b-qj7b8k2vkr] {
    width: 130px;
    text-align: center;
}

/* ── Restaurant Link ────────────────────────────────────── */
.restaurant-link[b-qj7b8k2vkr] {
    color: var(--text-primary, #1a1a2e);
    text-decoration: none;
    font-weight: 500;
}

.restaurant-link:hover[b-qj7b8k2vkr] {
    color: #00d4aa;
    text-decoration: underline;
}

/* ── Signal Badge ───────────────────────────────────────── */
.signal-badge[b-qj7b8k2vkr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
}

.signal-badge--active[b-qj7b8k2vkr] {
    background: #d4f5ee;
    color: #00916a;
}

.signal-zero[b-qj7b8k2vkr] {
    color: #ced4da;
}

/* ── Status Badge ───────────────────────────────────────── */
.status-badge[b-qj7b8k2vkr] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.status-badge--claimed[b-qj7b8k2vkr] {
    background: #d4edda;
    color: #155724;
}

.status-badge--ghost[b-qj7b8k2vkr] {
    background: #e9ecef;
    color: #6c757d;
}

/* ── Responsive ─────────────────────────────────────────── */
@@media (max-width: 600px) {
    .signals-page-header[b-qj7b8k2vkr] {
        flex-direction: column;
    }

    .btn-refresh[b-qj7b8k2vkr] {
        width: 100%;
        justify-content: center;
    }

    .signals-stats-row[b-qj7b8k2vkr] {
        flex-direction: column;
    }

    .signals-table th[b-qj7b8k2vkr],
    .signals-table td[b-qj7b8k2vkr] {
        padding: 10px 12px;
        font-size: 0.82rem;
    }
}
/* /Pages/Sales.razor.rz.scp.css */
/* === Base Container === */
.sales-container[b-y5ldbzogkf] {
    background-color: #f5f5f5;
    min-height: 100vh;
    margin-left: 72px;
}

.sales-content[b-y5ldbzogkf] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* === Page Header === */
.page-header[b-y5ldbzogkf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.page-header-left h1[b-y5ldbzogkf] {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 4px 0;
}

.page-header-left p[b-y5ldbzogkf] {
    font-size: 13px;
    color: #666;
    margin: 0;
}

.page-header-right[b-y5ldbzogkf] {
    display: flex;
    gap: 8px;
}

/* === Sales Total Badge === */
.sales-total-badge[b-y5ldbzogkf] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.sales-total-badge .label[b-y5ldbzogkf] {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sales-total-badge .amount[b-y5ldbzogkf] {
    font-size: 18px;
    font-weight: 600;
    color: #1976d2;
}

/* === Orders Grid === */
.orders-grid-wrapper[b-y5ldbzogkf] {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
}

/* === Responsive === */
@media (max-width: 768px) {
    .sales-container[b-y5ldbzogkf] {
        margin-left: 0;
    }

    .sales-content[b-y5ldbzogkf] {
        padding: 16px;
    }

    .page-header[b-y5ldbzogkf] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .page-header-right[b-y5ldbzogkf] {
        width: 100%;
    }

    .sales-total-badge[b-y5ldbzogkf] {
        width: 100%;
        align-items: center;
    }
}
/* /Pages/SocialMedia.razor.rz.scp.css */
/* === Base Container === */
.social-media-container[b-9v2gc3p6av] {
    background-color: var(--paper);
    min-height: 100vh;
    margin-left: 72px;
}

.social-media-content[b-9v2gc3p6av] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* === Page Header === */
.page-header[b-9v2gc3p6av] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.page-header-left h1[b-9v2gc3p6av] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.page-header-left p[b-9v2gc3p6av] {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.connections-btn[b-9v2gc3p6av] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.connections-btn:hover[b-9v2gc3p6av] {
    border-color: var(--interactive);
    color: var(--interactive);
}

.connections-btn i[b-9v2gc3p6av] {
    color: var(--interactive);
}

.connection-count[b-9v2gc3p6av] {
    background: var(--interactive);
    color: var(--surface);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
}

/* === Connections Modal CSS moved to Client/Shared/Components/SocialMedia/ConnectionsModal.razor.css (Phase 159-01 Task 3) === */

/* .sm-card moved to global Client/wwwroot/css/social-media.css (v4.7 milestone close — cross-component reuse for extracted children) */

/* .create-post-card moved to PostComposer.razor.css (Phase 161-01) */
/* Post Timeline block (.timeline-card / .timeline-* / .sync-btn / .filter-select / .feed-* / .status-badge / .platform-icon) moved to PostHistory.razor.css (Phase 160) */
/* .post-type-badge family moved to global social-media.css (Phase 161 — cross-component reuse) */
/* .btn-sm.btn-primary moved to global social-media.css (Phase 160) */

/* === Suggestion Card Styles === */
.post-suggestion-card[b-9v2gc3p6av] {
    padding: 16px;
}

.suggestion-header[b-9v2gc3p6av] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.suggestion-reason[b-9v2gc3p6av] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.suggestion-detail[b-9v2gc3p6av] {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
}

.suggestion-content[b-9v2gc3p6av] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    margin-bottom: 12px;
}

.suggestion-image[b-9v2gc3p6av] {
    width: 100%;
    aspect-ratio: 9/16;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
}

.suggestion-text[b-9v2gc3p6av] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.suggestion-caption[b-9v2gc3p6av] {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.5;
}

.suggestion-hashtags[b-9v2gc3p6av] {
    font-size: 13px;
    color: var(--interactive);
    font-weight: 500;
}

.suggestion-actions[b-9v2gc3p6av] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* === Learning Loop === */
.learning-loop-container[b-9v2gc3p6av] {
    padding: 16px;
}

.learning-loop-header[b-9v2gc3p6av] {
    margin-bottom: 16px;
}

.learning-loop-header h2[b-9v2gc3p6av] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.learning-loop-header p[b-9v2gc3p6av] {
    font-size: 13px;
    color: var(--text-secondary);
}

.post-cell[b-9v2gc3p6av] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.post-cell img[b-9v2gc3p6av] {
    width: 56px;
    height: 56px;
    border-radius: 4px;
    object-fit: cover;
    background: var(--paper);
    border: 1px solid var(--border);
}

.post-caption[b-9v2gc3p6av] {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.post-platform[b-9v2gc3p6av] {
    font-size: 12px;
    color: var(--text-secondary);
}

/* .recycle-btn moved to global social-media.css (Phase 159 D-02) */

/* === Loading State block moved to PostComposer.razor.css (Phase 161-01) === */

/* === Intent Input Screen === */
.intent-input-container[b-9v2gc3p6av] {
    padding: 24px;
    text-align: center;
}

.intent-input-container h2[b-9v2gc3p6av] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.intent-input-container > p[b-9v2gc3p6av] {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

/* .intent-textarea moved to global social-media.css (Phase 159 D-02) */

.intent-suggestions[b-9v2gc3p6av] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    align-items: center;
    justify-content: center;
}

.suggestion-label[b-9v2gc3p6av] {
    font-size: 13px;
    color: var(--text-secondary);
    margin-right: 8px;
}

.suggestion-chip[b-9v2gc3p6av] {
    padding: 6px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.suggestion-chip:hover[b-9v2gc3p6av] {
    background: var(--surface-subtle);
    border-color: var(--interactive);
    color: var(--interactive);
}

/* === AI Ideas Grid + custom idea accordion blocks moved to PostComposer.razor.css (Phase 161-01) === */
/* .ideas-title-btn moved to global social-media.css (Phase 159 D-02) */
/* .custom-idea-textarea + .generate-btn moved to global social-media.css (Phase 159 D-02) */

/* === Connection Management === */
.connections-card[b-9v2gc3p6av] {
    border-top: 3px solid var(--brand-facebook);
    padding: 16px;
}

.connections-header[b-9v2gc3p6av] {
    margin-bottom: 16px;
}

.connections-header h3[b-9v2gc3p6av] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.connections-list[b-9v2gc3p6av] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.loading-connections[b-9v2gc3p6av] {
    color: var(--text-secondary);
    font-size: 13px;
    padding: 8px 0;
}

.connection-item[b-9v2gc3p6av] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--surface-subtle);
    border-radius: 6px;
    border: 1px solid var(--border);
    min-width: 280px;
}

.connection-info[b-9v2gc3p6av] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.connection-icon[b-9v2gc3p6av] {
    font-size: 24px;
}

.connection-icon.facebook[b-9v2gc3p6av] {
    color: var(--brand-facebook);
}

.connection-icon.instagram[b-9v2gc3p6av] {
    color: var(--brand-instagram);
}

.connection-details[b-9v2gc3p6av] {
    display: flex;
    flex-direction: column;
}

.connection-name[b-9v2gc3p6av] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.connection-status[b-9v2gc3p6av] {
    font-size: 11px;
}

.connection-status.active[b-9v2gc3p6av] {
    color: var(--status-ok);
}

.connection-status.pending[b-9v2gc3p6av] {
    color: var(--status-warn);
}

.connection-status.error[b-9v2gc3p6av] {
    color: var(--status-err);
}

.connection-actions[b-9v2gc3p6av] {
    display: flex;
    gap: 6px;
}

/* .btn-sm / .btn-outline / .btn-danger-outline moved to global social-media.css (Phase 160 — cross-component reuse) */

.connect-btn[b-9v2gc3p6av] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    color: var(--surface);
}

.connect-btn.facebook[b-9v2gc3p6av] {
    background: var(--brand-facebook);
}

.connect-btn.facebook:hover[b-9v2gc3p6av] {
    background: var(--brand-facebook-hover);
}

.connect-btn.instagram[b-9v2gc3p6av] {
    background: var(--brand-instagram-grad);
}

.connect-btn.instagram:hover[b-9v2gc3p6av] {
    opacity: 0.9;
}

.connection-hint[b-9v2gc3p6av] {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 8px 12px;
    background: var(--surface-subtle);
    border-radius: 4px;
}

.connection-hint i[b-9v2gc3p6av] {
    color: var(--status-warn);
    margin-right: 6px;
}

/* === Modal shell + page-selection shape moved to Client/wwwroot/css/social-media.css (Phase 159 D-01) === */

/* === Responsive Design === */
@media (max-width: 1024px) {
    .social-media-content[b-9v2gc3p6av] {
        max-width: 100%;
        padding: 20px 16px;
    }

    .suggestion-content[b-9v2gc3p6av] {
        grid-template-columns: 220px 1fr;
    }
}

@media (max-width: 768px) {
    .social-media-container[b-9v2gc3p6av] {
        margin-left: 0;
    }

    .social-media-content[b-9v2gc3p6av] {
        padding: 16px 12px;
        gap: 16px;
    }

    .suggestion-content[b-9v2gc3p6av] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .suggestion-image[b-9v2gc3p6av] {
        max-width: 100%;
        aspect-ratio: 16/9;
    }

    .suggestion-actions[b-9v2gc3p6av] {
        flex-direction: column;
    }

    .intent-input-container[b-9v2gc3p6av] {
        padding: 24px 16px;
        margin: 20px auto;
    }

    .learning-loop-container[b-9v2gc3p6av] {
        padding: 12px;
    }

    .post-suggestion-card[b-9v2gc3p6av] {
        padding: 12px;
    }

    .post-caption[b-9v2gc3p6av] {
        max-width: 180px;
    }
}

@media (max-width: 480px) {
    .social-media-content[b-9v2gc3p6av] {
        padding: 12px 8px;
        gap: 12px;
    }

    .intent-input-container h2[b-9v2gc3p6av] {
        font-size: 18px;
    }

    .suggestion-reason[b-9v2gc3p6av] {
        font-size: 13px;
    }

    .post-cell img[b-9v2gc3p6av] {
        width: 48px;
        height: 48px;
    }
}
/* /Pages/StaffSuggestionsPage.razor.rz.scp.css */
/* Phase 206 — StaffSuggestionsPage scoped CSS
   NO hex literals. rgba() alpha-tints are allowed per PostHistory.razor.css precedent.
   All colors via var(--...) DS tokens from colors_and_type.css. */

.staff-suggestions-container[b-e4vin8ut35] {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}

.staff-suggestions-content[b-e4vin8ut35] {
    max-width: var(--w-scanning);
    margin: 0 auto;
    padding: 0 var(--gutter-page);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.page-header[b-e4vin8ut35] {
    margin-bottom: var(--space-4);
}

.page-header h1[b-e4vin8ut35] {
    margin-bottom: var(--space-2);
}

.suggestion-form-card[b-e4vin8ut35] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
}

.suggestion-form-card label[b-e4vin8ut35] {
    font-size: var(--size-400);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
}

.suggestion-form-card textarea[b-e4vin8ut35] {
    width: 100%;
    min-height: 80px;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    padding: var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--size-400);
    color: var(--text-primary);
    background: var(--surface-subtle);
}

.suggestion-form-card textarea:focus[b-e4vin8ut35] {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--accent);
}

.suggestion-form-card textarea:disabled[b-e4vin8ut35] {
    opacity: 0.55;
    cursor: not-allowed;
}

.char-counter[b-e4vin8ut35] {
    font-size: var(--size-200);
    color: var(--text-muted);
    align-self: flex-end;
}

.submit-btn[b-e4vin8ut35] {
    align-self: flex-start;
    min-height: 44px;
    padding: var(--space-3) var(--space-6);
    background: var(--accent);
    color: var(--text-on-accent);
    border: none;
    border-radius: var(--radius-2);
    font-size: var(--size-400);
    font-weight: var(--weight-medium);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.submit-btn:disabled[b-e4vin8ut35] {
    opacity: 0.45;
    cursor: not-allowed;
}

.submit-feedback[b-e4vin8ut35] {
    font-size: var(--size-400);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-2);
}

.submit-success[b-e4vin8ut35] {
    background: rgba(16, 185, 129, 0.12);
    color: var(--status-ok);
}

.submit-error[b-e4vin8ut35] {
    background: rgba(239, 68, 68, 0.12);
    color: var(--status-err);
}

.suggestions-list[b-e4vin8ut35] {
    display: flex;
    flex-direction: column;
}

.suggestion-row[b-e4vin8ut35] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border);
}

.suggestion-body[b-e4vin8ut35] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}

.suggestion-text[b-e4vin8ut35] {
    color: var(--text-primary);
}

.suggestion-date[b-e4vin8ut35] {
    font-size: var(--size-200);
    color: var(--text-muted);
}

/* Status badges — rgba() alpha-tints allowed; DS tokens for text (PostHistory.razor.css precedent) */
.suggestion-status-badge[b-e4vin8ut35] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--size-200);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

.suggestion-status-badge.pending[b-e4vin8ut35]  { background: rgba(156, 163, 175, 0.15); color: var(--text-secondary); }
.suggestion-status-badge.used[b-e4vin8ut35]     { background: rgba(16, 185, 129, 0.12);  color: var(--status-ok); }
.suggestion-status-badge.skipped[b-e4vin8ut35]  { background: rgba(245, 158, 11, 0.12);  color: var(--status-warn); }
.suggestion-status-badge.expired[b-e4vin8ut35]  { background: rgba(239, 68, 68, 0.12);   color: var(--status-err); }

.tenant-guard-message[b-e4vin8ut35] {
    padding: var(--space-6);
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    color: var(--text-secondary);
}

.tenant-guard-message a[b-e4vin8ut35] {
    color: var(--accent);
    text-decoration: underline;
    margin-left: var(--space-2);
}

.loading-state[b-e4vin8ut35] {
    color: var(--text-muted);
    font-size: var(--size-400);
    padding: var(--space-4) 0;
}

.empty-state[b-e4vin8ut35] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-12) var(--space-6);
    color: var(--text-muted);
    text-align: center;
}

.empty-state i[b-e4vin8ut35] {
    font-size: 2rem;
}

.empty-state h3[b-e4vin8ut35] {
    font-size: var(--size-500);
    font-weight: var(--weight-semi);
    color: var(--text-secondary);
    margin: 0;
}

.empty-state p[b-e4vin8ut35] {
    font-size: var(--size-400);
    margin: 0;
}
/* /Pages/TermsOfService.razor.rz.scp.css */
.legal-page[b-ioo34ffbn6] {
    min-height: 100vh;
    background-color: #f8f9fa;
    padding: 24px 16px;
}

.legal-container[b-ioo34ffbn6] {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    padding: 32px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.legal-container h1[b-ioo34ffbn6] {
    font-size: 1.75rem;
    color: #212529;
    margin-bottom: 4px;
}

.last-updated[b-ioo34ffbn6] {
    color: #6c757d;
    font-size: 0.875rem;
    margin-bottom: 32px;
}

.legal-container section[b-ioo34ffbn6] {
    margin-bottom: 24px;
}

.legal-container h2[b-ioo34ffbn6] {
    font-size: 1.2rem;
    color: #343a40;
    margin-bottom: 12px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e9ecef;
}

.legal-container h3[b-ioo34ffbn6] {
    font-size: 1rem;
    color: #495057;
    margin-bottom: 8px;
    margin-top: 16px;
}

.legal-container p[b-ioo34ffbn6] {
    color: #495057;
    line-height: 1.6;
    margin-bottom: 12px;
}

.legal-container ul[b-ioo34ffbn6] {
    color: #495057;
    line-height: 1.6;
    padding-left: 24px;
    margin-bottom: 12px;
}

.legal-container li[b-ioo34ffbn6] {
    margin-bottom: 6px;
}

.legal-container a[b-ioo34ffbn6] {
    color: #28a745;
}

.legal-footer[b-ioo34ffbn6] {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

.back-link[b-ioo34ffbn6] {
    color: #28a745;
    text-decoration: none;
    font-size: 0.9rem;
}

.back-link:hover[b-ioo34ffbn6] {
    text-decoration: underline;
}

.separator[b-ioo34ffbn6] {
    color: #dee2e6;
    margin: 0 12px;
}
/* /Pages/TestDashboardPage.razor.rz.scp.css */
/* === Base Container === */
.test-dashboard-container[b-xpiaxw30xp] {
    background-color: #f5f5f5;
    min-height: 100vh;
    margin-left: 72px;
}

.test-dashboard-content[b-xpiaxw30xp] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* === Page Header === */
.page-header[b-xpiaxw30xp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.page-header-left h1[b-xpiaxw30xp] {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 4px 0;
}

.page-header-left p[b-xpiaxw30xp] {
    font-size: 13px;
    color: #666;
    margin: 0;
}

.page-header-right[b-xpiaxw30xp] {
    display: flex;
    gap: 8px;
}

/* === Buttons === */
.btn-action[b-xpiaxw30xp] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-action:hover[b-xpiaxw30xp] {
    border-color: #1976d2;
    color: #1976d2;
}

.btn-action:disabled[b-xpiaxw30xp] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-action.primary[b-xpiaxw30xp] {
    background: #1976d2;
    border-color: #1976d2;
    color: #fff;
}

.btn-action.primary:hover[b-xpiaxw30xp] {
    background: #1565c0;
}

/* === Loading State === */
.loading-state[b-xpiaxw30xp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 8px;
    color: #666;
    gap: 12px;
    font-size: 14px;
}

.loading-state i[b-xpiaxw30xp] {
    font-size: 28px;
    color: #1976d2;
}

/* === Source Filter Bar === */
.source-filter-bar[b-xpiaxw30xp] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 16px;
}

.filter-label[b-xpiaxw30xp] {
    font-size: 13px;
    font-weight: 500;
    color: #555;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-label i[b-xpiaxw30xp] {
    color: #1976d2;
}

[b-xpiaxw30xp] .source-dropdown {
    min-width: 180px;
}

/* === Dashboard Sections === */
.dashboard-section[b-xpiaxw30xp] {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    overflow: hidden;
}

.dashboard-placeholder[b-xpiaxw30xp] {
    display: none; /* hidden until Plan 04 populates content */
}

.section-header[b-xpiaxw30xp] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.section-header > i[b-xpiaxw30xp] {
    color: #1976d2;
    font-size: 16px;
}

.section-header h2[b-xpiaxw30xp] {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0;
    flex: 0 0 auto;
}

.section-hint[b-xpiaxw30xp] {
    font-size: 12px;
    color: #999;
    margin-left: auto;
    font-style: italic;
}

.result-count[b-xpiaxw30xp] {
    font-size: 12px;
    color: #666;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 2px 8px;
    margin-left: auto;
}

.branch-badge[b-xpiaxw30xp] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #555;
    background: #e8f4fd;
    border: 1px solid #bbdefb;
    border-radius: 12px;
    padding: 2px 8px;
    margin-left: 4px;
}

.branch-badge i[b-xpiaxw30xp] {
    color: #1976d2;
    font-size: 11px;
}

.commit-sha[b-xpiaxw30xp] {
    font-family: monospace;
    color: #888;
    font-size: 11px;
}

.run-time[b-xpiaxw30xp] {
    font-size: 12px;
    color: #999;
    margin-left: auto;
}

/* === Summary Cards === */
.summary-cards[b-xpiaxw30xp] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.summary-card[b-xpiaxw30xp] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    border-left: 3px solid #e0e0e0;
    background: #fafafa;
    flex: 1;
    min-width: 140px;
    transition: box-shadow 0.2s;
}

.summary-card:hover[b-xpiaxw30xp] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Color-coded left borders by hint */
.summary-card.improved[b-xpiaxw30xp] {
    border-left-color: #4caf50;
    background: #f9fff9;
}

.summary-card.regressed[b-xpiaxw30xp] {
    border-left-color: #dc3545;
    background: #fff9f9;
}

.summary-card.neutral[b-xpiaxw30xp] {
    border-left-color: #e0e0e0;
}

/* Card icon backgrounds */
.card-icon[b-xpiaxw30xp] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.card-icon.passed[b-xpiaxw30xp] {
    background: #e8f5e9;
    color: #4caf50;
}

.card-icon.failed[b-xpiaxw30xp] {
    background: #ffebee;
    color: #dc3545;
}

.card-icon.skipped[b-xpiaxw30xp] {
    background: #fff3e0;
    color: #ff9800;
}

.card-icon.coverage[b-xpiaxw30xp] {
    background: #e3f2fd;
    color: #2196f3;
}

.card-icon.duration[b-xpiaxw30xp] {
    background: #f5f5f5;
    color: #666;
}

/* Card info text */
.card-info[b-xpiaxw30xp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.card-value[b-xpiaxw30xp] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
}

.card-value.passed[b-xpiaxw30xp]  { color: #4caf50; }
.card-value.failed[b-xpiaxw30xp]  { color: #dc3545; }
.card-value.skipped[b-xpiaxw30xp] { color: #ff9800; }
.card-value.coverage[b-xpiaxw30xp] { color: #2196f3; }
.card-value.duration[b-xpiaxw30xp] { color: #666; }

.card-label[b-xpiaxw30xp] {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.card-delta[b-xpiaxw30xp] {
    font-size: 11px;
    margin-top: 2px;
}

.card-delta.positive[b-xpiaxw30xp] { color: #4caf50; }
.card-delta.negative[b-xpiaxw30xp] { color: #dc3545; }
.card-delta.neutral[b-xpiaxw30xp]  { color: #aaa; }

/* === Empty State === */
.empty-state[b-xpiaxw30xp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    text-align: center;
    gap: 12px;
}

.empty-state > i[b-xpiaxw30xp] {
    font-size: 40px;
    color: #bbb;
}

.empty-state h2[b-xpiaxw30xp] {
    font-size: 18px;
    font-weight: 600;
    color: #555;
    margin: 0;
}

.empty-state p[b-xpiaxw30xp] {
    font-size: 14px;
    color: #777;
    margin: 0;
    max-width: 480px;
}

.empty-command-block[b-xpiaxw30xp] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1e1e1e;
    border-radius: 6px;
    padding: 12px 16px;
    max-width: 600px;
}

.empty-command-block code[b-xpiaxw30xp] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 13px;
    color: #d4d4d4;
    flex: 1;
    text-align: left;
    user-select: all;
}

.btn-copy[b-xpiaxw30xp] {
    background: transparent;
    border: 1px solid #555;
    border-radius: 4px;
    color: #aaa;
    padding: 4px 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
}

.btn-copy:hover[b-xpiaxw30xp] {
    border-color: #888;
    color: #ddd;
}

.empty-hint[b-xpiaxw30xp] {
    font-size: 12px;
    color: #999;
}

.empty-hint code[b-xpiaxw30xp] {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 1px 5px;
    font-family: monospace;
    font-size: 12px;
}

/* === Empty Section (no data for a panel) === */
.empty-section[b-xpiaxw30xp] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px;
    color: #aaa;
    font-size: 14px;
    justify-content: center;
}

.empty-section i[b-xpiaxw30xp] {
    font-size: 20px;
}

/* === Outcome Badges (in grid) === */
.outcome-badge[b-xpiaxw30xp] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.outcome-badge.outcome-passed[b-xpiaxw30xp]  { background: #e8f5e9; color: #388e3c; }
.outcome-badge.outcome-failed[b-xpiaxw30xp]  { background: #ffebee; color: #c62828; }
.outcome-badge.outcome-skipped[b-xpiaxw30xp] { background: #fff3e0; color: #e65100; }

/* === Error Preview === */
.error-preview[b-xpiaxw30xp] {
    font-size: 12px;
    color: #c62828;
    font-style: italic;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

/* === Detail Template Panel === */
.test-detail-panel[b-xpiaxw30xp] {
    padding: 16px 20px;
    background: #fafafa;
    border-top: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-section[b-xpiaxw30xp] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.detail-label[b-xpiaxw30xp] {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-label i[b-xpiaxw30xp] {
    color: #1976d2;
}

.error-message[b-xpiaxw30xp] {
    font-size: 13px;
    color: #c62828;
    background: #fff8f8;
    border: 1px solid #ffcdd2;
    border-radius: 4px;
    padding: 10px 12px;
    white-space: pre-wrap;
    word-break: break-word;
}

.stack-trace[b-xpiaxw30xp] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
    color: #444;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 10px 12px;
    overflow-x: auto;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre;
    margin: 0;
}

.detail-empty[b-xpiaxw30xp] {
    font-size: 13px;
    color: #aaa;
    font-style: italic;
    padding: 8px 0;
}

/* === Flaky Banner === */
.flaky-banner[b-xpiaxw30xp] {
    background: #fff8e1;
    border: 1px solid #ffcc02;
    border-left: 4px solid #ff9800;
    border-radius: 8px;
    padding: 20px;
}

.flaky-header[b-xpiaxw30xp] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.flaky-header > i[b-xpiaxw30xp] {
    color: #ff9800;
    font-size: 18px;
    flex-shrink: 0;
}

.flaky-header h2[b-xpiaxw30xp] {
    font-size: 15px;
    font-weight: 600;
    color: #e65100;
    margin: 0;
    flex: 1;
}

.flaky-badge[b-xpiaxw30xp] {
    background: #ff9800;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.flaky-list[b-xpiaxw30xp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.flaky-item[b-xpiaxw30xp] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 1px solid #ffe082;
    border-radius: 6px;
    padding: 12px 14px;
}

.flaky-item-name[b-xpiaxw30xp] {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flaky-item-name > i[b-xpiaxw30xp] {
    color: #ff9800;
    flex-shrink: 0;
}

.flaky-item-meta[b-xpiaxw30xp] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.flaky-meta-chip[b-xpiaxw30xp] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #777;
    background: #fff3e0;
    border: 1px solid #ffe0b2;
    border-radius: 10px;
    padding: 2px 8px;
}

.flaky-meta-chip i[b-xpiaxw30xp] {
    color: #ff9800;
    font-size: 10px;
}

.flaky-flips[b-xpiaxw30xp] {
    color: #e65100;
    font-weight: 600;
}

/* === Bottom Panels (Slowest + Coverage side by side) === */
.bottom-panels[b-xpiaxw30xp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* === Slowest Tests Panel === */
.slowest-list[b-xpiaxw30xp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.slowest-item[b-xpiaxw30xp] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: box-shadow 0.15s;
}

.slowest-item:hover[b-xpiaxw30xp] {
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}

.slowest-rank[b-xpiaxw30xp] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e3f2fd;
    color: #1976d2;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.slowest-info[b-xpiaxw30xp] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.slowest-name[b-xpiaxw30xp] {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slowest-meta[b-xpiaxw30xp] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.slowest-project[b-xpiaxw30xp] {
    font-size: 11px;
    color: #888;
}

.slowest-duration[b-xpiaxw30xp] {
    font-size: 13px;
    font-weight: 600;
    color: #e65100;
    white-space: nowrap;
    flex-shrink: 0;
}

/* === Coverage Breakdown === */
.coverage-breakdown[b-xpiaxw30xp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.coverage-row[b-xpiaxw30xp] {
    display: grid;
    grid-template-columns: 140px 1fr 48px;
    align-items: center;
    gap: 10px;
}

.coverage-project-name[b-xpiaxw30xp] {
    font-size: 12px;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coverage-bar-container[b-xpiaxw30xp] {
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.coverage-bar[b-xpiaxw30xp] {
    height: 100%;
    border-radius: 4px;
    background: #4caf50;
    transition: width 0.4s ease;
}

.coverage-bar.coverage-high[b-xpiaxw30xp] { background: #4caf50; }
.coverage-bar.coverage-mid[b-xpiaxw30xp]  { background: #ff9800; }
.coverage-bar.coverage-low[b-xpiaxw30xp]  { background: #dc3545; }

.coverage-value[b-xpiaxw30xp] {
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.coverage-value.coverage-high[b-xpiaxw30xp] { color: #388e3c; }
.coverage-value.coverage-mid[b-xpiaxw30xp]  { color: #e65100; }
.coverage-value.coverage-low[b-xpiaxw30xp]  { color: #c62828; }

/* === Uncovered Files Section === */
.uncovered-files-section[b-xpiaxw30xp] {
    border-top: 1px solid #e0e0e0;
    padding-top: 16px;
    margin-top: 4px;
}

.uncovered-files-header[b-xpiaxw30xp] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
}

.uncovered-files-header i[b-xpiaxw30xp] {
    color: #1976d2;
}

.uncovered-files[b-xpiaxw30xp] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 12px;
    color: #c62828;
    background: #fff8f8;
    border: 1px solid #ffcdd2;
    border-radius: 4px;
    padding: 10px 12px;
    max-height: 140px;
    overflow-y: auto;
}

.uncovered-files li[b-xpiaxw30xp] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uncovered-files-empty[b-xpiaxw30xp] {
    font-size: 12px;
    color: #999;
    font-style: italic;
    margin: 0;
    line-height: 1.5;
}

/* === Responsive === */
@media (max-width: 900px) {
    .bottom-panels[b-xpiaxw30xp] {
        grid-template-columns: 1fr;
    }

    .coverage-row[b-xpiaxw30xp] {
        grid-template-columns: 120px 1fr 44px;
    }
}

@media (max-width: 768px) {
    .test-dashboard-container[b-xpiaxw30xp] {
        margin-left: 0;
    }

    .test-dashboard-content[b-xpiaxw30xp] {
        padding: 16px;
    }

    .summary-cards[b-xpiaxw30xp] {
        flex-direction: column;
    }

    .summary-card[b-xpiaxw30xp] {
        min-width: unset;
        width: 100%;
    }

    .page-header[b-xpiaxw30xp] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .source-filter-bar[b-xpiaxw30xp] {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-header[b-xpiaxw30xp] {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-hint[b-xpiaxw30xp],
    .result-count[b-xpiaxw30xp],
    .run-time[b-xpiaxw30xp] {
        margin-left: 0;
    }
}
/* /Pages/UserRolesPage.razor.rz.scp.css */
/* =========================================================
   User Roles Page — two-panel layout
   ========================================================= */

.user-roles-container[b-c3u576s60z] {
    background-color: #f5f5f5;
    min-height: 100vh;
    margin-left: 72px;
}

.user-roles-content[b-c3u576s60z] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---- Page Header ---- */
.page-header[b-c3u576s60z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.page-header-left h1[b-c3u576s60z] {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 4px 0;
}

.page-header-left h1 i[b-c3u576s60z] {
    color: #1976d2;
    margin-right: 8px;
    font-size: 15px;
}

.page-header-left p[b-c3u576s60z] {
    color: #666;
    margin: 0;
    font-size: 13px;
}

/* ---- Alerts ---- */
.alert-success[b-c3u576s60z], .alert-error[b-c3u576s60z] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
}

.alert-success[b-c3u576s60z] {
    background: #f0fff4;
    color: #276749;
    border: 1px solid #c6f6d5;
}

.alert-error[b-c3u576s60z] {
    background: #fff5f5;
    color: #c53030;
    border: 1px solid #fed7d7;
}

/* ---- Loading State ---- */
.loading-state[b-c3u576s60z] {
    text-align: center;
    padding: 48px;
    color: #a0aec0;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.loading-state i[b-c3u576s60z] {
    font-size: 28px;
    margin-bottom: 12px;
    display: block;
}

/* ---- Two-Panel Card ---- */
.two-panel-card[b-c3u576s60z] {
    display: flex;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    min-height: 500px;
}

/* ---- Left: User List Panel ---- */
.user-list-panel[b-c3u576s60z] {
    width: 250px;
    flex-shrink: 0;
    border-right: 1px solid #e0e0e0;
    overflow-y: auto;
    background: #fafafa;
}

.panel-header[b-c3u576s60z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #a0aec0;
    border-bottom: 1px solid #efefef;
}

.count-badge[b-c3u576s60z] {
    background: #edf2f7;
    color: #718096;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.panel-empty[b-c3u576s60z] {
    padding: 24px 14px;
    font-size: 13px;
    color: #a0aec0;
    text-align: center;
}

.panel-empty.centered[b-c3u576s60z] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
}

.user-list-row[b-c3u576s60z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-left: 3px solid transparent;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.1s;
}

.user-list-row:hover[b-c3u576s60z] {
    background: #f0f4f8;
}

.user-list-row.selected[b-c3u576s60z] {
    background: #fff;
    border-left-color: #1976d2;
}

/* ---- Avatars ---- */
.user-avatar[b-c3u576s60z] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.av-blue[b-c3u576s60z]   { background: #ebf8ff; color: #2b6cb0; }
.av-green[b-c3u576s60z]  { background: #f0fff4; color: #276749; }
.av-purple[b-c3u576s60z] { background: #faf5ff; color: #553c9a; }
.av-orange[b-c3u576s60z] { background: #fffaf0; color: #c05621; }
.av-teal[b-c3u576s60z]   { background: #e6fffa; color: #234e52; }

/* ---- User Info ---- */
.user-info[b-c3u576s60z] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.user-name[b-c3u576s60z] {
    font-size: 13px;
    font-weight: 500;
    color: #2d3748;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-email[b-c3u576s60z] {
    font-size: 10px;
    color: #a0aec0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'SFMono-Regular', Consolas, monospace;
}

/* ---- Right: Role Panel ---- */
.role-panel[b-c3u576s60z] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.role-panel-header[b-c3u576s60z] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}

.role-panel-header .user-avatar[b-c3u576s60z] {
    width: 36px;
    height: 36px;
    font-size: 12px;
}

.role-panel-header .user-name[b-c3u576s60z] {
    font-size: 14px;
    font-weight: 600;
}

.role-panel-header .user-email[b-c3u576s60z] {
    font-size: 11px;
}

/* ---- Role List ---- */
.role-list[b-c3u576s60z] {
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ---- Role Row ---- */
.role-row[b-c3u576s60z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    transition: border-color 0.15s;
}

.role-row.editing[b-c3u576s60z] {
    background: #f7fbff;
    border-color: #90cdf4;
}

.role-row-info[b-c3u576s60z] {
    flex: 1;
    min-width: 0;
}

.role-bu-name[b-c3u576s60z] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #2d3748;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.role-bu-meta[b-c3u576s60z] {
    display: block;
    font-size: 10px;
    color: #a0aec0;
    font-family: 'SFMono-Regular', Consolas, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

/* ---- Role Badges ---- */
.role-badge[b-c3u576s60z] {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.role-badge--admin[b-c3u576s60z] {
    background: #ebf8ff;
    border: 1px solid #90cdf4;
    color: #2b6cb0;
}

.role-badge--operator[b-c3u576s60z] {
    background: #f0fff4;
    border: 1px solid #9ae6b4;
    color: #276749;
}

/* ---- Icon Buttons ---- */
.btn-icon[b-c3u576s60z] {
    background: none;
    border: none;
    color: #cbd5e0;
    cursor: pointer;
    font-size: 13px;
    padding: 4px 5px;
    border-radius: 4px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.btn-icon:hover[b-c3u576s60z] {
    color: #4a5568;
    background: #edf2f7;
}

.btn-icon--danger:hover[b-c3u576s60z] {
    color: #c53030;
    background: #fff5f5;
}

/* ---- Edit Select ---- */
.role-edit-select[b-c3u576s60z] {
    padding: 4px 8px;
    border: 1px solid #90cdf4;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #2b6cb0;
    background: #ebf8ff;
    outline: none;
    cursor: pointer;
    flex-shrink: 0;
}

.role-edit-select:focus[b-c3u576s60z] {
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

/* ---- Save / Cancel Buttons ---- */
.btn-save[b-c3u576s60z] {
    padding: 5px 13px;
    background: #1976d2;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.btn-save:hover:not(:disabled)[b-c3u576s60z] {
    background: #1565c0;
}

.btn-save:disabled[b-c3u576s60z] {
    opacity: 0.6;
    cursor: default;
}

.btn-cancel[b-c3u576s60z] {
    padding: 5px 11px;
    background: #fff;
    color: #718096;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.btn-cancel:hover[b-c3u576s60z] {
    background: #f7fafc;
}

/* ---- Add Row ---- */
.add-row[b-c3u576s60z] {
    background: #fafafa;
    border: 1.5px dashed #e2e8f0;
    border-radius: 7px;
    gap: 8px;
    margin-top: 2px;
}

.add-select[b-c3u576s60z] {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    font-size: 13px;
    color: #4a5568;
    background: #fff;
    outline: none;
    cursor: pointer;
}

.add-select:focus[b-c3u576s60z] {
    border-color: #90cdf4;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
}

.add-select--role[b-c3u576s60z] {
    flex: 0 0 110px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .user-roles-container[b-c3u576s60z] {
        margin-left: 0;
    }

    .two-panel-card[b-c3u576s60z] {
        flex-direction: column;
    }

    .user-list-panel[b-c3u576s60z] {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }
}
/* /Pages/WealthAllocationEditorCard.razor.rz.scp.css */
/* WealthAllocationEditorCard.razor.css — Phase 232 (ALLOC-01, ALLOC-03).
   DS tokens only. Zero hex literals (RazorCssNoHexLiteralsTest gate).
   No .e-* Syncfusion selectors (GATE-02). No font-family override on body.
   All colors via var(--...) tokens from colors_and_type.css. */

/* ── Card container (mirrors WealthL1PulseCard pattern) ─────────────────── */
.allocation-card[b-0l2mnasxl6] {
    border: 1px solid var(--border);
    border-radius: var(--radius-5);
    box-shadow: var(--elevation-1);
    background: var(--surface-elevated);
    padding: var(--space-8);
}

.allocation-card-header[b-0l2mnasxl6] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.allocation-heading[b-0l2mnasxl6] {
    font-size: var(--size-700);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.allocation-version-badge[b-0l2mnasxl6] {
    font-size: var(--size-300);
    font-weight: var(--weight-regular);
    color: var(--text-secondary);
}

/* ── Loading skeleton ───────────────────────────────────────────────────── */
.allocation-loading[b-0l2mnasxl6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.allocation-skeleton-row[b-0l2mnasxl6] {
    height: 48px;
    border-radius: var(--radius-4);
    background: var(--border);
    animation: allocation-skeleton-pulse-b-0l2mnasxl6 0.8s ease infinite alternate;
}

@keyframes allocation-skeleton-pulse-b-0l2mnasxl6 {
    from { opacity: 1; }
    to   { opacity: 0.4; }
}

/* ── Error state ────────────────────────────────────────────────────────── */
.allocation-error[b-0l2mnasxl6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.allocation-error-heading[b-0l2mnasxl6] {
    font-size: var(--size-500);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    margin: 0;
}

.allocation-retry-link[b-0l2mnasxl6] {
    color: var(--accent);
    font-size: var(--size-500);
    text-decoration: none;
    cursor: pointer;
    width: fit-content;
}

.allocation-retry-link:hover[b-0l2mnasxl6] {
    text-decoration: underline;
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.allocation-empty[b-0l2mnasxl6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) 0;
}

.allocation-empty-heading[b-0l2mnasxl6] {
    font-size: var(--size-600);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    margin: 0;
}

.allocation-empty-body[b-0l2mnasxl6] {
    font-size: var(--size-500);
    color: var(--text-secondary);
    margin: 0;
}

/* ── Bucket rows ────────────────────────────────────────────────────────── */
.allocation-bucket-list[b-0l2mnasxl6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.allocation-bucket-row[b-0l2mnasxl6] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-3);
}

.allocation-bucket-row:hover[b-0l2mnasxl6] {
    background: var(--accent-soft);
}

.allocation-bucket-name[b-0l2mnasxl6] {
    font-size: var(--size-500);
    font-weight: var(--weight-regular);
    color: var(--text-primary);
    grid-column: 1;
    grid-row: 1;
}

.allocation-bucket-inputs[b-0l2mnasxl6] {
    display: flex;
    flex-direction: row;
    gap: var(--space-3);
    grid-column: 2;
    grid-row: 1;
    align-items: center;
}

.allocation-input-group[b-0l2mnasxl6] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
}

.allocation-target-input[b-0l2mnasxl6] {
    width: 72px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--border);
    border-radius: var(--radius-3);
    padding: var(--space-1) var(--space-2);
    font-size: var(--size-500);
    color: var(--text-primary);
    background: var(--surface-elevated);
}

.allocation-target-input:focus[b-0l2mnasxl6] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.allocation-input-suffix[b-0l2mnasxl6] {
    font-size: var(--size-400);
    color: var(--text-secondary);
}

.allocation-tolerance-prefix[b-0l2mnasxl6] {
    font-size: var(--size-400);
    color: var(--text-secondary);
    font-weight: var(--weight-semi);
}

.allocation-tolerance-input[b-0l2mnasxl6] {
    width: 56px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--border);
    border-radius: var(--radius-3);
    padding: var(--space-1) var(--space-2);
    font-size: var(--size-400);
    color: var(--text-primary);
    background: var(--surface-elevated);
}

.allocation-tolerance-input:focus[b-0l2mnasxl6] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* ── Drift bar ──────────────────────────────────────────────────────────── */
.allocation-drift-bar[b-0l2mnasxl6] {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 4px;
    background: var(--border);
    border-radius: var(--radius-pill);
    overflow: hidden;
    margin-top: var(--space-1);
}

.allocation-drift-fill[b-0l2mnasxl6] {
    height: 100%;
    border-radius: var(--radius-pill);
    transition: width var(--motion-duration) var(--curve-default);
}

.allocation-drift-fill--ok[b-0l2mnasxl6] {
    background: var(--accent);
}

.allocation-drift-fill--warn[b-0l2mnasxl6] {
    background: var(--status-warn);
}

/* ── Sum row ────────────────────────────────────────────────────────────── */
.sum-row[b-0l2mnasxl6] {
    font-size: var(--size-500);
    font-weight: var(--weight-semi);
    font-variant-numeric: tabular-nums;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border);
    margin-bottom: var(--space-4);
}

.sum-row--ok[b-0l2mnasxl6] {
    color: var(--status-ok);
}

.sum-row--err[b-0l2mnasxl6] {
    color: var(--status-err);
}

/* ── Breach banner ──────────────────────────────────────────────────────── */
.breach-banner[b-0l2mnasxl6] {
    border-left: 3px solid var(--status-warn);
    background: var(--surface-elevated);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    border-radius: 0 var(--radius-3) var(--radius-3) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.breach-banner-text[b-0l2mnasxl6] {
    font-size: var(--size-400);
    color: var(--status-warn);
    margin: 0;
}

.btn-warn[b-0l2mnasxl6] {
    align-self: flex-start;
    border: 1px solid var(--status-warn);
    color: var(--status-warn);
    background: transparent;
    border-radius: var(--radius-4);
    padding: var(--space-2) var(--space-4);
    font-size: var(--size-400);
    cursor: pointer;
    min-height: 36px;
}

.btn-warn:hover:not(:disabled)[b-0l2mnasxl6] {
    background: var(--status-warn);
    color: var(--surface-elevated);
}

.btn-warn:disabled[b-0l2mnasxl6] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Success banner ─────────────────────────────────────────────────────── */
.save-success-banner[b-0l2mnasxl6] {
    border-left: 3px solid var(--status-ok);
    background: var(--surface-elevated);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    font-size: var(--size-400);
    color: var(--status-ok);
    font-weight: var(--weight-semi);
    border-radius: 0 var(--radius-3) var(--radius-3) 0;
    animation: fade-in var(--motion-duration) var(--curve-default);
}

/* ── Validation error ───────────────────────────────────────────────────── */
.allocation-validation-error[b-0l2mnasxl6] {
    font-size: var(--size-400);
    color: var(--status-err);
    padding: var(--space-2) 0;
    margin-bottom: var(--space-2);
}

/* ── Save button ────────────────────────────────────────────────────────── */
.allocation-save-btn[b-0l2mnasxl6] {
    width: 100%;
    min-height: 44px;
    background: var(--accent);
    color: var(--text-on-accent);
    border: none;
    border-radius: var(--radius-4);
    font-size: var(--size-500);
    font-weight: var(--weight-semi);
    cursor: pointer;
    margin-top: var(--space-2);
}

.allocation-save-btn:hover:not(:disabled)[b-0l2mnasxl6] {
    background: var(--accent-soft);
    color: var(--accent);
}

.allocation-save-btn:disabled[b-0l2mnasxl6] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .allocation-skeleton-row[b-0l2mnasxl6],
    .allocation-drift-fill[b-0l2mnasxl6],
    .save-success-banner[b-0l2mnasxl6] {
        animation: none;
        transition: none;
    }
}
/* /Pages/WealthDataEntryPage.razor.rz.scp.css */
/* WealthDataEntryPage.razor.css
   Phase 230 (D-01, UI-SPEC) — Data Entry page scoped styles.
   DS tokens only: var(--token). No hex literals (GATE-01). No override (GATE-02).
   Prefix: de-. Drift tokens banned (WealthCssTokenComplianceTests). */

.de-page[b-wzi3qt0ebp] {
    padding: var(--space-8);
}

.de-page-heading[b-wzi3qt0ebp] {
    font-size: var(--size-700);
    font-weight: var(--weight-semi);
    line-height: 1.25;
    color: var(--text-primary);
    margin-bottom: var(--space-6);
}

/* ── Account card ─────────────────────────────────────────────────────────── */

.de-account-card[b-wzi3qt0ebp] {
    border: 1px solid var(--border);
    border-radius: var(--radius-5);
    background: var(--surface-elevated);
    margin-bottom: var(--space-4);
    padding: var(--space-6);
}

.de-account-header[b-wzi3qt0ebp] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.de-expand-toggle[b-wzi3qt0ebp] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex: 1;
    text-align: left;
    min-height: 44px;
}

.de-account-label[b-wzi3qt0ebp] {
    font-size: var(--size-500);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
}

.de-badge[b-wzi3qt0ebp] {
    font-size: var(--size-300);
    font-weight: var(--weight-semi);
    color: var(--text-muted);
    text-transform: uppercase;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-5);
}

.de-account-balance[b-wzi3qt0ebp] {
    font-size: var(--size-400);
    color: var(--text-primary);
    margin-left: auto;
}

/* ── Form styles ──────────────────────────────────────────────────────────── */

.de-account-form[b-wzi3qt0ebp],
.de-liability-form[b-wzi3qt0ebp] {
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.de-label[b-wzi3qt0ebp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--size-400);
    color: var(--text-primary);
    font-weight: var(--weight-regular);
}

.de-input[b-wzi3qt0ebp] {
    border: 1px solid var(--border);
    border-radius: var(--radius-5);
    padding: var(--space-2) var(--space-3);
    font-size: var(--size-400);
    color: var(--text-primary);
    background: var(--surface);
}

.de-helper-text[b-wzi3qt0ebp] {
    color: var(--text-muted);
    font-size: var(--size-300);
    font-weight: var(--weight-regular);
    line-height: 1.45;
    margin-top: var(--space-1);
}

.de-form-actions[b-wzi3qt0ebp] {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.de-save-btn[b-wzi3qt0ebp] {
    font-size: var(--size-400);
    font-weight: var(--weight-semi);
    color: var(--accent);
    background: none;
    border: 1px solid var(--accent);
    border-radius: var(--radius-5);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    min-height: 44px;
}

.de-cancel-btn[b-wzi3qt0ebp] {
    font-size: var(--size-400);
    font-weight: var(--weight-regular);
    color: var(--text-secondary);
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-5);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    min-height: 44px;
}

/* ── Liabilities ──────────────────────────────────────────────────────────── */

.de-liabilities-list[b-wzi3qt0ebp] {
    margin-top: var(--space-3);
    border-top: 1px solid var(--border);
    padding-top: var(--space-3);
}

.de-liability-row[b-wzi3qt0ebp] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--size-400);
}

.de-liability-col[b-wzi3qt0ebp] {
    color: var(--text-secondary);
    font-size: var(--size-400);
    font-weight: var(--weight-regular);
}

/* Phase 254-02: account context column on the flat Skulder tab. Stronger weight
   than .de-liability-col to read as the row's primary identifier. */
.de-liab-account-label[b-wzi3qt0ebp] {
    color: var(--text-primary);
    font-size: var(--size-400);
    font-weight: var(--weight-semi);
}

.de-liability-form--add[b-wzi3qt0ebp] {
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-3);
}

/* ── Holdings tab (Phase 254-01) — mirrors .de-liability-* tokens ─────────── */

.de-holdings-list[b-wzi3qt0ebp] {
    margin-top: var(--space-3);
    border-top: 1px solid var(--border);
    padding-top: var(--space-3);
}

.de-holding-row[b-wzi3qt0ebp] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--size-400);
}

.de-holding-col[b-wzi3qt0ebp] {
    color: var(--text-secondary);
    font-size: var(--size-400);
    font-weight: var(--weight-regular);
}

.de-holding-form[b-wzi3qt0ebp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
}

.de-holding-form--add[b-wzi3qt0ebp] {
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-3);
}

/* ── Action buttons (add, edit, delete) ───────────────────────────────────── */

.de-add-btn[b-wzi3qt0ebp],
.de-add-liability-btn[b-wzi3qt0ebp] {
    background: none;
    border: none;
    color: var(--accent);
    font-size: var(--size-400);
    cursor: pointer;
    padding: var(--space-2) 0;
    margin-top: var(--space-3);
    min-height: 44px;
}

.de-edit-icon[b-wzi3qt0ebp],
.de-delete-icon[b-wzi3qt0ebp] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-1);
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.de-delete-icon:hover[b-wzi3qt0ebp] {
    color: var(--status-err);
}

/* ── Delete confirm inline ────────────────────────────────────────────────── */

.de-delete-confirm[b-wzi3qt0ebp] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.de-delete-prompt[b-wzi3qt0ebp] {
    font-size: var(--size-300);
    color: var(--text-muted);
}

.de-delete-yes[b-wzi3qt0ebp] {
    font-size: var(--size-300);
    color: var(--status-err);
    text-decoration: underline;
}

.de-delete-cancel[b-wzi3qt0ebp] {
    font-size: var(--size-300);
    color: var(--text-secondary);
    text-decoration: underline;
}

/* ── Loading skeleton ─────────────────────────────────────────────────────── */

.de-skeleton[b-wzi3qt0ebp] {
    height: 72px;
    border-radius: var(--radius-5);
    background: var(--border);
    margin-bottom: var(--space-4);
    animation: de-pulse-b-wzi3qt0ebp 1.5s ease-in-out infinite;
}

@keyframes de-pulse-b-wzi3qt0ebp {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ── Error and empty states ───────────────────────────────────────────────── */

.de-error[b-wzi3qt0ebp],
.de-empty[b-wzi3qt0ebp] {
    padding: var(--space-8) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.de-error-heading[b-wzi3qt0ebp],
.de-empty-heading[b-wzi3qt0ebp] {
    font-size: var(--size-500);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
}

.de-error-body[b-wzi3qt0ebp],
.de-empty-hint[b-wzi3qt0ebp] {
    font-size: var(--size-400);
    color: var(--text-secondary);
}

.de-retry-link[b-wzi3qt0ebp] {
    color: var(--accent);
    font-size: var(--size-400);
    text-decoration: underline;
}

/* ── Phase 231: Tab strip ─────────────────────────────────────────────────── */

.de-tabs[b-wzi3qt0ebp] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-6);
}

.de-tab[b-wzi3qt0ebp] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: var(--space-2) var(--space-4);
    font-size: var(--size-400);
    font-weight: var(--weight-regular);
    color: var(--text-secondary);
    cursor: pointer;
    min-height: 44px;
    transition: color 0.15s;
}

.de-tab--active[b-wzi3qt0ebp] {
    color: var(--text-primary);
    border-bottom: 2px solid var(--accent);
    font-weight: var(--weight-semi);
}

/* ── Phase 231: CSV import section ────────────────────────────────────────── */

.de-csv-tab[b-wzi3qt0ebp] {
    display: flex;
    flex-direction: column;
}

.de-import-section[b-wzi3qt0ebp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.de-select[b-wzi3qt0ebp] {
    /* inherits .de-input rules — no additional override needed */
}

.de-file-picker[b-wzi3qt0ebp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.de-file-input[b-wzi3qt0ebp] {
    min-height: 44px;
    font-size: var(--size-400);
    color: var(--text-primary);
}

/* ── Phase 231: Dry-run + import buttons ─────────────────────────────────── */

.de-dryryn-btn[b-wzi3qt0ebp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    font-size: var(--size-400);
    font-weight: var(--weight-semi);
    border: 1px solid var(--accent);
    color: var(--accent);
    background: none;
    border-radius: var(--radius-5);
    cursor: pointer;
    transition: opacity 0.15s;
}

.de-dryryn-btn:disabled[b-wzi3qt0ebp] {
    border-color: var(--border);
    color: var(--text-muted);
    cursor: not-allowed;
}

.de-import-btn[b-wzi3qt0ebp] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    font-size: var(--size-400);
    font-weight: var(--weight-semi);
    border: 1px solid var(--accent);
    color: var(--accent);
    background: none;
    border-radius: var(--radius-5);
    cursor: pointer;
    transition: opacity 0.15s;
}

.de-import-btn:disabled[b-wzi3qt0ebp] {
    border-color: var(--border);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* ── Phase 231: Loading spinner ───────────────────────────────────────────── */

.de-preview-loading[b-wzi3qt0ebp] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) 0;
}

.de-preview-loading-label[b-wzi3qt0ebp] {
    font-size: var(--size-400);
    color: var(--text-secondary);
}

.de-spinner[b-wzi3qt0ebp] {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: de-spin-b-wzi3qt0ebp 0.7s linear infinite;
    flex-shrink: 0;
}

.de-spinner--inline[b-wzi3qt0ebp] {
    width: 16px;
    height: 16px;
}

@keyframes de-spin-b-wzi3qt0ebp {
    to { transform: rotate(360deg); }
}

/* ── Phase 231: Preview section ───────────────────────────────────────────── */

.de-preview-section[b-wzi3qt0ebp] {
    margin-top: var(--space-6);
}

.de-preview-meta[b-wzi3qt0ebp] {
    font-size: var(--size-300);
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}

.de-preview-columns[b-wzi3qt0ebp] {
    font-size: var(--size-300);
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

.de-preview-section-heading[b-wzi3qt0ebp] {
    font-size: var(--size-500);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    margin-top: 0;
}

/* ── Phase 231: Errors + warnings ─────────────────────────────────────────── */

.de-preview-errors[b-wzi3qt0ebp] {
    border: 1px solid var(--status-err);
    border-radius: var(--radius-5);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--surface-elevated);
}

.de-preview-warnings[b-wzi3qt0ebp] {
    background: var(--surface-elevated);
    border-radius: var(--radius-5);
    padding: var(--space-3);
    margin-bottom: var(--space-4);
}

.de-preview-error[b-wzi3qt0ebp] {
    border: 1px solid var(--status-err);
    border-radius: var(--radius-5);
    padding: var(--space-4);
    background: var(--surface-elevated);
    margin-bottom: var(--space-4);
}

.de-error-list[b-wzi3qt0ebp],
.de-warning-list[b-wzi3qt0ebp] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.de-error-item[b-wzi3qt0ebp] {
    font-size: var(--size-300);
    color: var(--status-err);
}

.de-error-value[b-wzi3qt0ebp] {
    color: var(--text-muted);
    font-size: var(--size-300);
}

.de-warning-item[b-wzi3qt0ebp] {
    font-size: var(--size-300);
    color: var(--text-secondary);
}

/* ── Phase 231: Preview table ─────────────────────────────────────────────── */

.de-preview-table-wrap[b-wzi3qt0ebp] {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-5);
    margin-bottom: var(--space-4);
}

.de-preview-table[b-wzi3qt0ebp] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--size-300);
}

.de-preview-table th[b-wzi3qt0ebp] {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    background: var(--surface-elevated);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
}

.de-preview-table td[b-wzi3qt0ebp] {
    padding: var(--space-2) var(--space-3);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}

/* ── Phase 231: Import result ─────────────────────────────────────────────── */

.de-import-result[b-wzi3qt0ebp] {
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-5);
    background: var(--surface-elevated);
    margin-top: var(--space-4);
}

.de-import-result-text[b-wzi3qt0ebp] {
    font-size: var(--size-400);
    color: var(--text-primary);
    font-weight: var(--weight-regular);
    margin: 0;
}
/* /Pages/WealthDataQualityPage.razor.rz.scp.css */
.dataquality-page[b-mt2ep6349g] { padding: var(--ds-space-6); }
.dataquality-title[b-mt2ep6349g] { font-size: var(--ds-font-size-xl); font-weight: var(--ds-font-weight-semibold); margin-bottom: var(--ds-space-4); }
.dataquality-filters[b-mt2ep6349g] { display: flex; align-items: center; gap: var(--ds-space-3); margin-bottom: var(--ds-space-4); }
.dataquality-age[b-mt2ep6349g] { font-variant-numeric: tabular-nums; }
/* D-09 DS token status badge colors — no hex literals (RazorCssNoHexLiteralsTest gate) */
.badge--verified[b-mt2ep6349g] { color: var(--ds-color-success); font-weight: var(--ds-font-weight-medium); }
.badge--stale[b-mt2ep6349g]    { color: var(--ds-color-warning); font-weight: var(--ds-font-weight-medium); }
.badge--missing[b-mt2ep6349g]  { color: var(--ds-color-danger);  font-weight: var(--ds-font-weight-medium); }
/* /Pages/WealthHoldingsCard.razor.rz.scp.css */
/* WealthHoldingsCard.razor.css — Phase 229 (HOLD-05, D-16).
   DS tokens only. Zero hex literals (RazorCssNoHexLiteralsTest GATE-01).
   Geist inherits globally — no override. No scoped .e-* Syncfusion selectors (GATE-02).
   Mirrors WealthL1PulseCard.razor.css structure with l3- prefix. */

/* ── Card container ────────────────────────────────── */
.l3-card[b-bwpr2n77cg] {
    border: 1px solid var(--border);
    border-radius: var(--radius-5);
    box-shadow: var(--elevation-1);
    background: var(--surface-elevated);
    padding: var(--space-8);
}

.l3-heading[b-bwpr2n77cg] {
    margin: 0 0 var(--space-4) 0;
    color: var(--text-primary);
}

/* ── Loading state (skeleton) ───────────────────────── */
.l3-loading[b-bwpr2n77cg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.pulse-skeleton--chart[b-bwpr2n77cg] {
    width: 100%;
    height: 240px;
    border-radius: var(--radius-5);
    background: var(--border);
    animation: skeleton-pulse-b-bwpr2n77cg 1.4s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-bwpr2n77cg {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

/* ── Error state ────────────────────────────────────── */
.l3-error[b-bwpr2n77cg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.l3-error-heading[b-bwpr2n77cg] {
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    margin: 0;
}

.l3-error-body[b-bwpr2n77cg] {
    color: var(--text-secondary);
    margin: 0;
}

.l3-retry-link[b-bwpr2n77cg] {
    color: var(--accent);
    font-size: var(--size-400);
    text-decoration: underline;
    cursor: pointer;
    align-self: flex-start;
}

.l3-retry-link:hover[b-bwpr2n77cg] {
    color: var(--text-primary);
}

/* ── Empty state ────────────────────────────────────── */
.l3-empty-area[b-bwpr2n77cg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.l3-empty[b-bwpr2n77cg] {
    color: var(--text-secondary);
    margin: 0;
}

.l3-empty-hint[b-bwpr2n77cg] {
    color: var(--text-muted);
    margin: 0;
    font-size: var(--size-300);
}

/* ── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pulse-skeleton--chart[b-bwpr2n77cg] {
        animation: none;
    }
}
/* /Pages/WealthL1PulseCard.razor.rz.scp.css */
/* WealthL1PulseCard.razor.css — Phase 227.
   DS tokens only. Zero hex literals (RazorCssNoHexLiteralsTest gate).
   No type-family override. No Syncfusion.
   Ring uses conic-gradient with --goal-pct CSS custom property set from Blazor. */

/* ── Card container ────────────────────────────────── */
.l1-card[b-c3v35w5de4] {
    border: 1px solid var(--border);
    border-radius: var(--radius-5);
    box-shadow: var(--elevation-1);
    background: var(--surface-elevated);
    padding: var(--space-8);
}

.l1-heading[b-c3v35w5de4] {
    margin: 0 0 var(--space-4) 0;
    color: var(--text-primary);
}

/* ── Ring area ──────────────────────────────────────── */
.l1-ring-area[b-c3v35w5de4] {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-8);
}

.l1-ring-wrap[b-c3v35w5de4] {
    position: relative;
    width: 160px;
    height: 160px;
}

.pulse-ring[b-c3v35w5de4] {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: conic-gradient(
        var(--accent) 0% var(--goal-pct, 0%),
        var(--border) var(--goal-pct, 0%) 100%
    );
    /* Donut cut-out */
    -webkit-mask: radial-gradient(transparent 58px, black 59px);
    mask: radial-gradient(transparent 58px, black 59px);
    /* Mount animation — uses --motion-duration (respects prefers-reduced-motion via global token) */
    transition: background var(--motion-duration) var(--curve-default);
}

.l1-ring-center[b-c3v35w5de4] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.l1-ring-value[b-c3v35w5de4] {
    font-size: var(--size-900);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    line-height: 1.15;
}

.l1-ring-unit[b-c3v35w5de4] {
    color: var(--text-secondary);
    margin-top: var(--space-1);
}

/* ── Stat tiles ─────────────────────────────────────── */
.l1-tiles[b-c3v35w5de4] {
    display: flex;
    flex-direction: row;
    gap: var(--space-8);
}

.l1-tile[b-c3v35w5de4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-4);
    background: var(--surface-elevated);
}

/* Stat tile values: raw tokens per UI-SPEC (size-700 = 22px). The global utility class at 18px was intentionally not used here. */
.l1-tile-value[b-c3v35w5de4] {
    font-size: var(--size-700);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    line-height: 1.3;
}

.l1-tile-unit[b-c3v35w5de4] {
    color: var(--text-secondary);
    margin-top: var(--space-1);
}

.l1-tile-label[b-c3v35w5de4] {
    color: var(--text-secondary);
    margin-top: var(--space-2);
}

/* ── Loading skeleton ───────────────────────────────── */
.l1-loading[b-c3v35w5de4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
}

.l1-tiles-loading[b-c3v35w5de4] {
    display: flex;
    flex-direction: row;
    gap: var(--space-8);
    width: 100%;
}

.pulse-skeleton[b-c3v35w5de4] {
    background: var(--border);
    animation: skeleton-pulse-b-c3v35w5de4 0.8s var(--curve-default) infinite alternate;
}

.pulse-skeleton--ring[b-c3v35w5de4] {
    width: 160px;
    height: 160px;
    border-radius: 50%;
}

.pulse-skeleton--tile[b-c3v35w5de4] {
    flex: 1;
    height: 72px;
    border-radius: var(--radius-4);
}

@keyframes skeleton-pulse-b-c3v35w5de4 {
    from { opacity: 1; }
    to   { opacity: 0.4; }
}

/* ── Error state ────────────────────────────────────── */
.l1-error[b-c3v35w5de4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.l1-error-heading[b-c3v35w5de4] {
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    margin: 0;
}

.l1-error-body[b-c3v35w5de4] {
    color: var(--text-secondary);
    margin: 0;
}

.l1-retry-link[b-c3v35w5de4] {
    color: var(--accent);
    font-size: var(--size-500);
    text-decoration: none;
    cursor: pointer;
    width: fit-content;
}

.l1-retry-link:hover[b-c3v35w5de4] {
    text-decoration: underline;
}

/* ── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pulse-ring[b-c3v35w5de4] {
        animation: none;
        transition: none;
    }
    .pulse-skeleton[b-c3v35w5de4] {
        animation: none;
        opacity: 0.5;
    }
}
/* /Pages/WealthL2NarrativeCard.razor.rz.scp.css */
/* WealthL2NarrativeCard.razor.css — Phase 227.
   DS tokens only. No hex literals (RazorCssNoHexLiteralsTest gate).
   No type-family override. No Syncfusion dependencies. */

.l2-card[b-r5nm14qno3] {
    border: 1px solid var(--border);
    border-radius: var(--radius-5);
    box-shadow: var(--elevation-1);
    background: var(--surface-elevated);
    padding: var(--space-8);
}

.l2-heading[b-r5nm14qno3] {
    margin: 0 0 var(--space-4) 0;
    color: var(--text-primary);
}

.l2-badge[b-r5nm14qno3] {
    display: inline-flex;
    align-items: center;
    background: var(--accent-soft);
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-2);
    margin-bottom: var(--space-4);
}

.l2-badge .ds-meta[b-r5nm14qno3] {
    color: var(--text-muted);
}

.l2-rows[b-r5nm14qno3] {
    display: flex;
    flex-direction: column;
}

.l2-row[b-r5nm14qno3] {
    border-top: 1px solid var(--border);
    padding: var(--space-4) 0;
}

.l2-row--last[b-r5nm14qno3] {
    /* No bottom border on last row (UI-SPEC spec) */
}

.l2-eyebrow[b-r5nm14qno3] {
    margin: 0 0 var(--space-1) 0;
    color: var(--text-muted);
}

.l2-body[b-r5nm14qno3] {
    margin: 0;
    color: var(--text-primary);
}
/* /Pages/WealthRiskInterviewCard.razor.rz.scp.css */
/* WealthRiskInterviewCard.razor.css — Phase 232 (RISK-04).
   DS tokens only. Zero hex literals (RazorCssNoHexLiteralsTest gate — NewRazorCssFiles check).
   No .e-* Syncfusion selectors (GATE-02). No font-family override on body.
   All colors via var(--...) tokens from colors_and_type.css. */

/* ── Card container (mirrors WealthL1PulseCard pattern) ─────────────────── */
.interview-card[b-lcdbotzaoz] {
    border: 1px solid var(--border);
    border-radius: var(--radius-5);
    box-shadow: var(--elevation-1);
    background: var(--surface-elevated);
    padding: var(--space-8);
}

.interview-heading[b-lcdbotzaoz] {
    font-size: var(--size-700);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    margin: 0 0 var(--space-6) 0;
    line-height: 1.2;
}

/* ── Loading skeleton ───────────────────────────────────────────────────── */
.interview-loading[b-lcdbotzaoz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.pulse-skeleton--card[b-lcdbotzaoz] {
    width: 100%;
    height: 200px;
    border-radius: var(--radius-4);
    background: var(--border);
    animation: interview-skeleton-pulse-b-lcdbotzaoz 0.8s ease infinite alternate;
}

@keyframes interview-skeleton-pulse-b-lcdbotzaoz {
    from { opacity: 1; }
    to   { opacity: 0.4; }
}

/* ── Error state ────────────────────────────────────────────────────────── */
.interview-error[b-lcdbotzaoz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.interview-error-heading[b-lcdbotzaoz] {
    font-size: var(--size-500);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    margin: 0;
}

.interview-retry-link[b-lcdbotzaoz] {
    color: var(--accent);
    font-size: var(--size-500);
    text-decoration: none;
    cursor: pointer;
    width: fit-content;
}

.interview-retry-link:hover[b-lcdbotzaoz] {
    text-decoration: underline;
}

/* ── Empty / first-visit state ──────────────────────────────────────────── */
.interview-empty[b-lcdbotzaoz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-8) 0;
    text-align: center;
}

.interview-empty-heading[b-lcdbotzaoz] {
    font-size: var(--size-600);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    margin: 0;
}

.interview-empty-body[b-lcdbotzaoz] {
    font-size: var(--size-500);
    color: var(--text-secondary);
    margin: 0;
    max-width: 480px;
}

.interview-start-btn[b-lcdbotzaoz] {
    background: var(--accent);
    color: var(--text-on-accent);
    border: none;
    border-radius: var(--radius-4);
    padding: var(--space-4) var(--space-8);
    font-size: var(--size-500);
    font-weight: var(--weight-semi);
    cursor: pointer;
    min-height: 44px;
}

.interview-start-btn:hover[b-lcdbotzaoz] {
    background: var(--accent-soft);
    color: var(--accent);
}

/* ── FSM breadcrumb ─────────────────────────────────────────────────────── */
.interview-breadcrumb[b-lcdbotzaoz] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    overflow-x: auto;
    padding-bottom: var(--space-1);
}

.fsm-dot[b-lcdbotzaoz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

.fsm-dot-circle[b-lcdbotzaoz] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--border);
    transition: background var(--motion-duration) var(--curve-default);
}

.fsm-dot-label[b-lcdbotzaoz] {
    font-size: var(--size-300);
    color: var(--text-secondary);
    white-space: nowrap;
}

.fsm-dot--active .fsm-dot-circle[b-lcdbotzaoz] {
    background: var(--accent);
    border-color: var(--accent);
}

.fsm-dot--active .fsm-dot-label[b-lcdbotzaoz] {
    color: var(--accent);
    font-weight: var(--weight-semi);
}

.fsm-dot--done .fsm-dot-circle[b-lcdbotzaoz] {
    background: var(--status-ok);
    border-color: var(--status-ok);
}

.fsm-dot--done .fsm-dot-label[b-lcdbotzaoz] {
    color: var(--status-ok);
}

.fsm-dot--upcoming .fsm-dot-circle[b-lcdbotzaoz] {
    background: transparent;
    border-color: var(--border);
}

/* ── Locked banner ──────────────────────────────────────────────────────── */
.interview-locked-banner[b-lcdbotzaoz] {
    border-left: 3px solid var(--status-ok);
    background: var(--surface-elevated);
    padding: var(--space-4) var(--space-4);
    margin-bottom: var(--space-4);
    font-size: var(--size-400);
    color: var(--status-ok);
    font-weight: var(--weight-semi);
    border-radius: 0 var(--radius-3) var(--radius-3) 0;
}

/* ── Unanswered fields warning banner ───────────────────────────────────── */
.interview-unanswered-banner[b-lcdbotzaoz] {
    border-left: 3px solid var(--status-warn);
    background: var(--surface-elevated);
    padding: var(--space-4) var(--space-4);
    margin-bottom: var(--space-4);
    font-size: var(--size-400);
    color: var(--status-warn);
    border-radius: 0 var(--radius-3) var(--radius-3) 0;
}

/* ── Chat bubble area ───────────────────────────────────────────────────── */
.interview-chat-area[b-lcdbotzaoz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-height: 360px;
    overflow-y: auto;
    padding: var(--space-4);
    background: var(--paper);
    border-radius: var(--radius-4);
    border: 1px solid var(--border);
    margin-bottom: var(--space-4);
}

.interview-chat-bubble[b-lcdbotzaoz] {
    max-width: 80%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-5);
    font-size: var(--size-500);
    line-height: 1.5;
    word-break: break-word;
}

.interview-chat-bubble--owner[b-lcdbotzaoz] {
    align-self: flex-end;
    background: var(--accent);
    color: var(--text-on-accent);
    border-bottom-right-radius: var(--radius-1);
}

.interview-chat-bubble--interviewer[b-lcdbotzaoz] {
    align-self: flex-start;
    background: var(--surface-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-bottom-left-radius: var(--radius-1);
}

.interview-chat-bubble--sending[b-lcdbotzaoz] {
    opacity: 0.6;
}

/* ── Input area ─────────────────────────────────────────────────────────── */
.interview-input-area[b-lcdbotzaoz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.interview-textarea[b-lcdbotzaoz] {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-4);
    padding: var(--space-3);
    font-size: var(--size-500);
    color: var(--text-primary);
    background: var(--surface-elevated);
    resize: vertical;
    min-height: 72px;
    box-sizing: border-box;
}

.interview-textarea:focus[b-lcdbotzaoz] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.interview-send-btn[b-lcdbotzaoz] {
    align-self: flex-end;
    background: var(--accent);
    color: var(--text-on-accent);
    border: none;
    border-radius: var(--radius-4);
    padding: var(--space-2) var(--space-6);
    font-size: var(--size-500);
    font-weight: var(--weight-semi);
    cursor: pointer;
    min-height: 40px;
}

.interview-send-btn:disabled[b-lcdbotzaoz] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Back / Skip / Clarify trigger buttons ──────────────────────────────── */
.interview-trigger-buttons[b-lcdbotzaoz] {
    display: flex;
    flex-direction: row;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.interview-trigger-btn[b-lcdbotzaoz] {
    flex: 1;
    min-height: 44px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-primary);
    border-radius: var(--radius-4);
    font-size: var(--size-400);
    cursor: pointer;
    transition: background var(--motion-duration) var(--curve-default);
}

.interview-trigger-btn:hover:not(:disabled)[b-lcdbotzaoz] {
    background: var(--accent-soft);
}

.interview-trigger-btn:disabled[b-lcdbotzaoz] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Lock button area ───────────────────────────────────────────────────── */
.interview-lock-button[b-lcdbotzaoz] {
    margin-top: var(--space-4);
}

/* Lock button min-height is 48px (applied inline — enforced here for reference) */
.interview-lock-button button[b-lcdbotzaoz] {
    min-height: 48px;
}

/* ── Edit locked link ───────────────────────────────────────────────────── */
.interview-edit-area[b-lcdbotzaoz] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-2);
}

.interview-edit-link[b-lcdbotzaoz] {
    font-size: var(--size-400);
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
}

.interview-edit-link:hover[b-lcdbotzaoz] {
    color: var(--accent);
    text-decoration: underline;
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pulse-skeleton--card[b-lcdbotzaoz],
    .interview-trigger-btn[b-lcdbotzaoz],
    .fsm-dot-circle[b-lcdbotzaoz] {
        animation: none;
        transition: none;
    }
}
/* /Pages/WealthScenariosPage.razor.rz.scp.css */
.scenarios-page[b-qrr11appe4] { padding: var(--ds-space-6); }
.scenarios-header[b-qrr11appe4] { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ds-space-4); }
.scenarios-title[b-qrr11appe4] { font-size: var(--ds-font-size-xl); font-weight: var(--ds-font-weight-semibold); }
/* D-13: greyed-out disabled row.
   Phase 233-09 gap-closure (WR-07): disable interactions on the row body, but keep the
   /DataQuality link clickable so the D-13 UX goal works ("disabled rows ... clickable
   link to /DataQuality"). Scope pointer-events:none to direct children except anchor /
   .scenario-missing-link descendants. */
.scenario-row--disabled[b-qrr11appe4] { opacity: 0.4; }
.scenario-row--disabled > :not(a):not(.scenario-missing-link):not(.scenario-row--keep-clickable)[b-qrr11appe4] {
    pointer-events: none;
}
.scenario-row--disabled a[b-qrr11appe4],
.scenario-row--disabled .scenario-missing-link[b-qrr11appe4] {
    pointer-events: auto;
    cursor: pointer;
}
.scenario-row[b-qrr11appe4] { margin-bottom: var(--ds-space-2); }
.scenario-accordion summary[b-qrr11appe4] { display: flex; align-items: center; gap: var(--ds-space-3); cursor: pointer; padding: var(--ds-space-3); border-radius: var(--ds-radius-md); }
.scenario-accordion summary:hover[b-qrr11appe4] { background: var(--ds-color-surface-hover); }
.scenario-name[b-qrr11appe4] { flex: 1; font-weight: var(--ds-font-weight-medium); }
.scenario-delta[b-qrr11appe4] { font-variant-numeric: tabular-nums; }
.scenario-delta--negative[b-qrr11appe4] { color: var(--ds-color-danger); }
.scenario-buckets[b-qrr11appe4] { padding: var(--ds-space-4); }
.scenario-missing-link[b-qrr11appe4] { color: var(--ds-color-warning); font-size: var(--ds-font-size-sm); }
/* /Pages/WealthShellPage.razor.rz.scp.css */
/* WealthShellPage.razor.css — Phase 227 token-drift fix.
   Canonical tokens only from Client/wwwroot/css/design-system/colors_and_type.css.
   No hex literals (RazorCssNoHexLiteralsTest gate).
   No type-family override on body (DS hard rule). */

.wealth-shell[b-uhdi2tjugg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: var(--w-reading);
    margin: 0 auto;
    padding: var(--space-12) var(--gutter-page) 0;
    background: var(--paper);
}

.wealth-shell-brand[b-uhdi2tjugg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
    color: var(--accent);
    align-self: center;
}

.wealth-shell-logo[b-uhdi2tjugg] {
    width: var(--space-16);
    height: var(--space-16);
    object-fit: contain;
}

.wealth-shell-wordmark[b-uhdi2tjugg] {
    font-size: var(--size-600);
    font-weight: var(--weight-semi);
    letter-spacing: 0.02em;
    color: var(--text-primary);
}

.wealth-shell-l1[b-uhdi2tjugg] {
    width: 100%;
    margin-top: var(--space-8);
}

.wealth-shell-l2[b-uhdi2tjugg] {
    width: 100%;
    margin-top: var(--space-6);
}

.wealth-shell-l3[b-uhdi2tjugg] {
    width: 100%;
    margin-top: var(--space-6);
}

.wealth-shell-risk[b-uhdi2tjugg] {
    width: 100%;
    margin-top: var(--space-6);
}

.wealth-shell-alloc[b-uhdi2tjugg] {
    width: 100%;
    margin-top: var(--space-6);
}

/* Phase 233 — NavLinks to /Scenarios and /DataQuality (TEST-05: no /WEALTH/ prefix) */
.wealth-shell-nav[b-uhdi2tjugg] {
    display: flex;
    gap: var(--ds-space-4);
    margin-top: var(--space-6);
    width: 100%;
    border-top: 1px solid var(--ds-color-border);
    padding-top: var(--ds-space-4);
}

.wealth-nav-link[b-uhdi2tjugg] {
    color: var(--ds-color-text-secondary);
    font-size: var(--ds-font-size-sm);
    font-weight: var(--ds-font-weight-medium);
    text-decoration: none;
    padding: var(--ds-space-2) var(--ds-space-3);
    border-radius: var(--ds-radius-sm);
}

.wealth-nav-link:hover[b-uhdi2tjugg] {
    background: var(--ds-color-surface-hover);
    color: var(--ds-color-text-primary);
}

.wealth-nav-link.active[b-uhdi2tjugg] {
    color: var(--ds-color-accent);
    font-weight: var(--ds-font-weight-semibold);
}

.wealth-shell-holdings-provenance[b-uhdi2tjugg] {
    width: 100%;
    margin-top: var(--space-6);
}
/* /Pages/WealthTriagePage.razor.rz.scp.css */
.wealth-triage-lanes[b-ea8rlhme3g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
}

.triage-loading[b-ea8rlhme3g] {
    padding: var(--space-4);
}

.triage-error[b-ea8rlhme3g] {
    padding: var(--space-4);
    color: var(--status-err);
}

.triage-retry-link[b-ea8rlhme3g] {
    color: var(--accent);
    cursor: pointer;
}
/* /Pages/Wealth/CommitteeMeeting.razor.rz.scp.css */
.committee-meeting[b-a05dx19u0k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    max-width: 64rem;
    margin: 0 auto;
}

.committee-loading[b-a05dx19u0k],
.committee-error[b-a05dx19u0k] {
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    background: var(--surface-subtle);
}

.committee-error[b-a05dx19u0k] {
    border-color: var(--color-status-warning);
}

.committee-retry-link[b-a05dx19u0k] {
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
}

.transcript[b-a05dx19u0k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.committee-closed[b-a05dx19u0k] {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}
/* /Pages/Wealth/DecisionJournal.razor.rz.scp.css */
/*
 * Phase 236 Plan 11 — DecisionJournal page.
 * DS tokens only. No hex literals.
 */
.decision-journal-page[b-2tr8chueil] {
    padding: var(--space-4);
    max-width: 1024px;
    margin: 0 auto;
}

.decision-journal-page__filters[b-2tr8chueil] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-3) 0;
}

.decision-journal-page__filter[b-2tr8chueil] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--size-300);
}

.decision-journal-page__filter select[b-2tr8chueil] {
    min-width: 180px;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--surface-elevated);
}

.decision-journal-page__list[b-2tr8chueil] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.decision-journal-page__empty[b-2tr8chueil] {
    color: var(--ink-muted);
    padding: var(--space-3) 0;
}

.decision-journal-page__error[b-2tr8chueil] {
    color: var(--ink);
    background: var(--color-wealth-band-breach);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
}
/* /Pages/Wealth/WealthCsvImportCard.razor.rz.scp.css */
/* WealthCsvImportCard.razor.css
   Phase 243 (IMPORT-01, D-11) — scoped CSS using ONLY design-system tokens.
   NO hex literals (RazorCssNoHexLiteralsTest gate).
   NO font-family on body (CLAUDE.md §Design System). */

.csv-import-card[b-rpdejvtl1n] {
    background: var(--surface-elevated);
    color: var(--text-primary);
    padding: var(--space-6);
    border-radius: var(--radius-5);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.csv-import-heading[b-rpdejvtl1n] {
    font-size: var(--size-700);
    font-weight: var(--weight-semi);
    line-height: 1.25;
    color: var(--text-primary);
    margin: 0 0 var(--space-3) 0;
}

.csv-import-subheading[b-rpdejvtl1n] {
    font-size: var(--size-600);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
}

.csv-import-section[b-rpdejvtl1n],
.csv-import-preview[b-rpdejvtl1n],
.csv-import-result[b-rpdejvtl1n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.csv-import-label[b-rpdejvtl1n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--size-300);
    color: var(--text-primary);
}

.csv-import-input[b-rpdejvtl1n],
.csv-import-select[b-rpdejvtl1n] {
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    background: var(--surface);
    color: var(--text-primary);
    font-size: var(--size-400);
    min-width: 200px;
}

.csv-import-file-picker[b-rpdejvtl1n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.csv-import-file-input[b-rpdejvtl1n] {
    padding: var(--space-1) 0;
    font-size: var(--size-300);
    color: var(--text-primary);
}

.csv-import-helper[b-rpdejvtl1n] {
    font-size: var(--size-300);
    color: var(--text-muted);
    margin: 0;
}

.csv-import-actions[b-rpdejvtl1n] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin-top: var(--space-2);
}

.csv-import-btn-primary[b-rpdejvtl1n] {
    background: var(--accent);
    color: var(--text-on-accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--size-400);
    font-weight: var(--weight-medium);
    min-height: 44px;
    cursor: pointer;
}

.csv-import-btn-primary:hover[b-rpdejvtl1n] {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.csv-import-btn-primary:disabled[b-rpdejvtl1n] {
    opacity: 0.5;
    cursor: not-allowed;
}

.csv-import-btn-secondary[b-rpdejvtl1n] {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--size-400);
    min-height: 44px;
    cursor: pointer;
}

.csv-import-alert[b-rpdejvtl1n] {
    background: var(--color-wealth-band-breach);
    color: var(--text-primary);
    padding: var(--space-3);
    border-radius: var(--radius-2);
    border: 1px solid var(--border);
}

.csv-import-alert-heading[b-rpdejvtl1n] {
    font-weight: var(--weight-semi);
    margin: 0 0 var(--space-1) 0;
}

.csv-import-alert-body[b-rpdejvtl1n] {
    margin: 0;
    font-size: var(--size-300);
}

.csv-import-counts[b-rpdejvtl1n] {
    font-size: var(--size-400);
    color: var(--text-secondary);
    margin: 0;
}

.csv-import-issues[b-rpdejvtl1n] {
    background: var(--surface-subtle);
    padding: var(--space-3);
    border-radius: var(--radius-2);
    border: 1px solid var(--border);
}

.csv-import-issues-list[b-rpdejvtl1n] {
    margin: var(--space-2) 0 0 var(--space-4);
    padding: 0;
    font-size: var(--size-300);
    color: var(--text-body);
}

.csv-import-table-wrap[b-rpdejvtl1n] {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
}

.csv-import-table[b-rpdejvtl1n] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--size-300);
}

.csv-import-table th[b-rpdejvtl1n],
.csv-import-table td[b-rpdejvtl1n] {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.csv-import-table th[b-rpdejvtl1n] {
    background: var(--surface-subtle);
    font-weight: var(--weight-semi);
    color: var(--text-secondary);
}

.csv-import-result-text[b-rpdejvtl1n] {
    font-size: var(--size-500);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    margin: 0;
}

.csv-import-banner-already[b-rpdejvtl1n] {
    background: var(--color-wealth-band-info);
    color: var(--text-primary);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-2);
    border: 1px solid var(--border);
    font-size: var(--size-400);
}
/* /Shared/Components/AI/AgentInstructionDisplay.razor.rz.scp.css */
.instruction-card[b-k37kwjp5ne] {
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    animation: fadeIn-b-k37kwjp5ne 0.3s ease-in;
}

.instruction-card.replied[b-k37kwjp5ne] {
    opacity: 0.7;
}

.instruction-message[b-k37kwjp5ne] {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #333;
    padding: 0.5rem 0;
}

.quick-replies-container[b-k37kwjp5ne] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 0 0.25rem;
}

.quick-reply-btn[b-k37kwjp5ne] {
    padding: 0.6rem 1.1rem;
    border-radius: 25px;
    border: none;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.quick-reply-btn:hover[b-k37kwjp5ne] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.quick-reply-btn:active[b-k37kwjp5ne] {
    transform: translateY(0);
}

.quick-reply-btn.selected[b-k37kwjp5ne] {
    opacity: 0.8;
    cursor: default;
}

.btn-primary[b-k37kwjp5ne] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-secondary[b-k37kwjp5ne] {
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
}

.btn-secondary:hover[b-k37kwjp5ne] {
    background: #e8e8e8;
}

.btn-success[b-k37kwjp5ne] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

.btn-danger[b-k37kwjp5ne] {
    background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
    color: white;
}

.btn-warning[b-k37kwjp5ne] {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
    color: #333;
}

.instruction-dismiss[b-k37kwjp5ne] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 0.25rem;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.instruction-card:hover .instruction-dismiss[b-k37kwjp5ne] {
    opacity: 1;
}

.instruction-dismiss:hover[b-k37kwjp5ne] {
    color: #333;
}

@keyframes fadeIn-b-k37kwjp5ne {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Shared/Components/AI/AIConversationContainer.razor.rz.scp.css */
.ai-conversation-container[b-bebr54lolo] {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 16px;
    position: relative;
}

.connecting-state[b-bebr54lolo],
.empty-state[b-bebr54lolo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: #666;
}

.connecting-state .e-icons[b-bebr54lolo],
.empty-state .e-icons[b-bebr54lolo] {
    font-size: 3rem;
    color: #999;
}

.spinner[b-bebr54lolo] {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin-b-bebr54lolo 1s linear infinite;
}

@keyframes spin-b-bebr54lolo {
    to {
        transform: rotate(360deg);
    }
}

.instruction-message[b-bebr54lolo] {
    font-size: 1.2rem;
    color: #333;
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ai-component-wrapper[b-bebr54lolo] {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.placeholder-component[b-bebr54lolo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    border: 2px dashed #ddd;
    color: #999;
    margin-bottom: 1rem;
    width: 100%;
}

.placeholder-component .e-icons[b-bebr54lolo] {
    font-size: 2.5rem;
}

.error-toast[b-bebr54lolo] {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: #ff4444;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3);
    animation: slideUp-b-bebr54lolo 0.3s ease-out;
}

@keyframes slideUp-b-bebr54lolo {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}
/* /Shared/Components/AI/AIFeedbackDialog.razor.rz.scp.css */
/* Dialog Header */
.dialog-header[b-p7b5sc79ty] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.dialog-header i[b-p7b5sc79ty] {
    color: #1976d2;
}

/* Intro text */
.feedback-intro[b-p7b5sc79ty] {
    padding: 12px 0 16px;
    color: #666;
    font-size: 13px;
    border-bottom: 1px solid #eee;
    margin-bottom: 16px;
}

/* Feedback Section */
.feedback-section[b-p7b5sc79ty] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.feedback-section:last-of-type[b-p7b5sc79ty] {
    border-bottom: none;
    margin-bottom: 8px;
}

.section-header[b-p7b5sc79ty] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.section-icon[b-p7b5sc79ty] {
    font-size: 16px;
}

.section-title[b-p7b5sc79ty] {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.provider-badge[b-p7b5sc79ty] {
    margin-left: auto;
    padding: 2px 8px;
    background: #e3f2fd;
    color: #1976d2;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.provider-badge.nano[b-p7b5sc79ty] {
    background: #fff3e0;
    color: #e65100;
}

/* Content Preview */
.content-preview[b-p7b5sc79ty] {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #495057;
    max-height: 80px;
    overflow-y: auto;
    line-height: 1.5;
}

.hashtags-preview[b-p7b5sc79ty] {
    color: #1976d2;
    font-size: 12px;
}

.overlay-preview[b-p7b5sc79ty] {
    font-style: italic;
}

.overlay-text[b-p7b5sc79ty] {
    color: #333;
}

.no-content[b-p7b5sc79ty] {
    color: #999;
    font-style: italic;
}

/* Image Preview */
.image-preview-container[b-p7b5sc79ty] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 10px;
    padding: 10px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
}

.preview-thumbnail[b-p7b5sc79ty] {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.image-prompt-preview[b-p7b5sc79ty] {
    flex: 1;
    min-width: 0;
}

.prompt-label[b-p7b5sc79ty] {
    display: block;
    font-size: 11px;
    color: #888;
    font-weight: 500;
    margin-bottom: 4px;
}

.prompt-text[b-p7b5sc79ty] {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    display: block;
}

.no-image[b-p7b5sc79ty] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #999;
    width: 100%;
}

.no-image i[b-p7b5sc79ty] {
    font-size: 24px;
    margin-bottom: 8px;
}

.no-image span[b-p7b5sc79ty] {
    font-size: 12px;
    font-style: italic;
}

/* Feedback Textarea */
.feedback-textarea[b-p7b5sc79ty] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    min-height: 50px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.feedback-textarea:focus[b-p7b5sc79ty] {
    outline: none;
    border-color: #1976d2;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.15);
}

.feedback-textarea[b-p7b5sc79ty]::placeholder {
    color: #aaa;
}

/* Character Count */
.char-count[b-p7b5sc79ty] {
    text-align: right;
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}

/* Error Message */
.error-message[b-p7b5sc79ty] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #ffebee;
    border: 1px solid #ffcdd2;
    border-radius: 6px;
    color: #c62828;
    font-size: 13px;
    margin-top: 16px;
}

.error-message i[b-p7b5sc79ty] {
    flex-shrink: 0;
}

/* Dialog overrides */
[b-p7b5sc79ty] .ai-feedback-dialog .e-dlg-content {
    padding: 16px 20px;
    max-height: 70vh;
    overflow-y: auto;
}

[b-p7b5sc79ty] .ai-feedback-dialog .e-footer-content {
    padding: 12px 20px;
    border-top: 1px solid #eee;
}

[b-p7b5sc79ty] .ai-feedback-dialog .e-btn.e-success {
    background: #1976d2;
    border-color: #1976d2;
}

[b-p7b5sc79ty] .ai-feedback-dialog .e-btn.e-success:hover {
    background: #1565c0;
    border-color: #1565c0;
}

[b-p7b5sc79ty] .ai-feedback-dialog .e-btn.e-success:disabled {
    background: #ccc;
    border-color: #ccc;
}
/* /Shared/Components/AI/AIFeedbackInline.razor.rz.scp.css */
/* ==================== TOOLBAR MODE ==================== */

.feedback-toolbar-wrapper[b-4k7tddsrea] {
    position: relative;
}


.feedback-popover[b-4k7tddsrea] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 280px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 100;
    overflow: hidden;
}

.feedback-popover-header[b-4k7tddsrea] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.feedback-popover .close-btn[b-4k7tddsrea] {
    background: transparent;
    border: none;
    font-size: 18px;
    color: #888;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.feedback-popover .close-btn:hover[b-4k7tddsrea] {
    color: #333;
}

.feedback-popover .feedback-textarea[b-4k7tddsrea] {
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    font-family: inherit;
    resize: none;
    min-height: 70px;
    box-sizing: border-box;
}

.feedback-popover .feedback-textarea:focus[b-4k7tddsrea] {
    outline: none;
    background: #fafafa;
}

.feedback-popover .feedback-textarea[b-4k7tddsrea]::placeholder {
    color: #999;
}

.feedback-popover .feedback-actions[b-4k7tddsrea] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #fafafa;
}

.feedback-popover .char-count[b-4k7tddsrea] {
    font-size: 11px;
    color: #999;
}

.feedback-popover .submit-btn[b-4k7tddsrea] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: #1976d2;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.feedback-popover .submit-btn:hover:not(:disabled)[b-4k7tddsrea] {
    background: #1565c0;
}

.feedback-popover .submit-btn:disabled[b-4k7tddsrea] {
    background: #ccc;
    cursor: not-allowed;
}

.feedback-success[b-4k7tddsrea] {
    background: #e8f5e9 !important;
    border-color: #c8e6c9 !important;
    color: #2e7d32 !important;
    cursor: default !important;
}

.feedback-success:hover[b-4k7tddsrea] {
    background: #e8f5e9 !important;
    border-color: #c8e6c9 !important;
    color: #2e7d32 !important;
}

/* ==================== INLINE MODE (Original) ==================== */

.ai-feedback-container[b-4k7tddsrea] {
    margin: 12px 0;
    font-family: inherit;
}

.ai-feedback-container.collapsed[b-4k7tddsrea] {
    margin: 8px 0;
}

/* Toggle button when collapsed */
.feedback-toggle-btn[b-4k7tddsrea] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px dashed #888;
    border-radius: 4px;
    color: #666;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.feedback-toggle-btn:hover[b-4k7tddsrea] {
    background: rgba(0, 0, 0, 0.05);
    border-color: #555;
    color: #333;
}

.feedback-icon[b-4k7tddsrea] {
    font-size: 1rem;
}

/* Expanded form */
.feedback-form[b-4k7tddsrea] {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
}

.feedback-header[b-4k7tddsrea] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
}

.close-btn[b-4k7tddsrea] {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: #888;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.close-btn:hover[b-4k7tddsrea] {
    color: #333;
}

.feedback-textarea[b-4k7tddsrea] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    box-sizing: border-box;
}

.feedback-textarea:focus[b-4k7tddsrea] {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
}

.feedback-textarea[b-4k7tddsrea]::placeholder {
    color: #999;
}

.feedback-actions[b-4k7tddsrea] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.char-count[b-4k7tddsrea] {
    font-size: 0.75rem;
    color: #888;
}

.submit-btn[b-4k7tddsrea] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.submit-btn:hover:not(:disabled)[b-4k7tddsrea] {
    background: #0056b3;
}

.submit-btn:disabled[b-4k7tddsrea] {
    background: #ccc;
    cursor: not-allowed;
}

/* Small spinner for submit button */
.spinner-small[b-4k7tddsrea] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-4k7tddsrea 0.8s linear infinite;
}

@keyframes spin-b-4k7tddsrea {
    to {
        transform: rotate(360deg);
    }
}

/* Submitted state */
.feedback-submitted[b-4k7tddsrea] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 6px;
    color: #155724;
    font-size: 0.9rem;
}

.success-icon[b-4k7tddsrea] {
    font-size: 1.1rem;
    font-weight: bold;
}
/* /Shared/Components/AI/AIIdeaFeedbackDialog.razor.rz.scp.css */
/* Dialog Header */
.dialog-header[b-pdn5ldq9y0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.dialog-header i[b-pdn5ldq9y0] {
    color: #f9a825;
}

/* Intro text */
.feedback-intro[b-pdn5ldq9y0] {
    padding: 12px 0 16px;
    color: #666;
    font-size: 13px;
    border-bottom: 1px solid #eee;
    margin-bottom: 16px;
}

/* Feedback Section */
.feedback-section[b-pdn5ldq9y0] {
    margin-bottom: 16px;
}

.section-header[b-pdn5ldq9y0] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.section-icon[b-pdn5ldq9y0] {
    font-size: 16px;
}

.section-title[b-pdn5ldq9y0] {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.provider-badge[b-pdn5ldq9y0] {
    margin-left: auto;
    padding: 2px 8px;
    background: #e3f2fd;
    color: #1976d2;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

/* Idea Preview */
.idea-preview[b-pdn5ldq9y0] {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
}

.idea-preview-row[b-pdn5ldq9y0] {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.4;
}

.idea-preview-row:last-child[b-pdn5ldq9y0] {
    margin-bottom: 0;
}

.idea-label[b-pdn5ldq9y0] {
    color: #666;
    font-weight: 500;
    min-width: 85px;
    flex-shrink: 0;
}

.idea-value[b-pdn5ldq9y0] {
    color: #333;
}

.idea-type-badge[b-pdn5ldq9y0] {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.idea-type-badge.feed[b-pdn5ldq9y0] {
    background-color: #e3f2fd;
    color: #1976d2;
}

.idea-type-badge.story[b-pdn5ldq9y0] {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

.idea-type-badge.reel[b-pdn5ldq9y0] {
    background-color: #fff3e0;
    color: #f57c00;
}

/* Feedback Textarea */
.feedback-textarea[b-pdn5ldq9y0] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    min-height: 70px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.feedback-textarea:focus[b-pdn5ldq9y0] {
    outline: none;
    border-color: #1976d2;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.15);
}

.feedback-textarea[b-pdn5ldq9y0]::placeholder {
    color: #aaa;
}

/* Character Count */
.char-count[b-pdn5ldq9y0] {
    text-align: right;
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}

/* Error Message */
.error-message[b-pdn5ldq9y0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #ffebee;
    border: 1px solid #ffcdd2;
    border-radius: 6px;
    color: #c62828;
    font-size: 13px;
    margin-top: 12px;
}

.error-message i[b-pdn5ldq9y0] {
    flex-shrink: 0;
}

/* Dialog overrides */
[b-pdn5ldq9y0] .ai-idea-feedback-dialog .e-dlg-content {
    padding: 16px 20px;
}

[b-pdn5ldq9y0] .ai-idea-feedback-dialog .e-footer-content {
    padding: 12px 20px;
    border-top: 1px solid #eee;
}

[b-pdn5ldq9y0] .ai-idea-feedback-dialog .e-btn.e-success {
    background: #1976d2;
    border-color: #1976d2;
}

[b-pdn5ldq9y0] .ai-idea-feedback-dialog .e-btn.e-success:hover {
    background: #1565c0;
    border-color: #1565c0;
}

[b-pdn5ldq9y0] .ai-idea-feedback-dialog .e-btn.e-success:disabled {
    background: #ccc;
    border-color: #ccc;
}
/* /Shared/Components/AI/AISessionFeedbackDialog.razor.rz.scp.css */
/* Dialog Header */
.dialog-header[b-db2w7ezt9a] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.dialog-header i[b-db2w7ezt9a] {
    color: #1976d2;
}

/* Intro text */
.feedback-intro[b-db2w7ezt9a] {
    padding: 12px 0 16px;
    color: #666;
    font-size: 13px;
    border-bottom: 1px solid #eee;
    margin-bottom: 16px;
}

/* Feedback Section */
.feedback-section[b-db2w7ezt9a] {
    margin-bottom: 16px;
}

.section-header[b-db2w7ezt9a] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.section-icon[b-db2w7ezt9a] {
    font-size: 16px;
}

.section-title[b-db2w7ezt9a] {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

/* Quick Select Chips */
.quick-chips[b-db2w7ezt9a] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quick-chip[b-db2w7ezt9a] {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 16px;
    background: #fff;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.quick-chip:hover[b-db2w7ezt9a] {
    border-color: #1976d2;
    color: #1976d2;
    background: #f5f9ff;
}

.quick-chip.selected[b-db2w7ezt9a] {
    border-color: #1976d2;
    background: #e3f2fd;
    color: #1976d2;
    font-weight: 500;
}

/* Ideas Summary */
.ideas-summary[b-db2w7ezt9a] {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 10px;
}

.idea-summary-item[b-db2w7ezt9a] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
}

.idea-summary-item:not(:last-child)[b-db2w7ezt9a] {
    border-bottom: 1px solid #eee;
    padding-bottom: 6px;
    margin-bottom: 2px;
}

.idea-summary-title[b-db2w7ezt9a] {
    color: #333;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.idea-type-badge[b-db2w7ezt9a] {
    display: inline-block;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.idea-type-badge.feed[b-db2w7ezt9a] {
    background-color: #e3f2fd;
    color: #1976d2;
}

.idea-type-badge.story[b-db2w7ezt9a] {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

.idea-type-badge.reel[b-db2w7ezt9a] {
    background-color: #fff3e0;
    color: #f57c00;
}

/* Feedback Textarea */
.feedback-textarea[b-db2w7ezt9a] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    min-height: 70px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.feedback-textarea:focus[b-db2w7ezt9a] {
    outline: none;
    border-color: #1976d2;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.15);
}

.feedback-textarea[b-db2w7ezt9a]::placeholder {
    color: #aaa;
}

/* Character Count */
.char-count[b-db2w7ezt9a] {
    text-align: right;
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}

/* Error Message */
.error-message[b-db2w7ezt9a] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #ffebee;
    border: 1px solid #ffcdd2;
    border-radius: 6px;
    color: #c62828;
    font-size: 13px;
    margin-top: 12px;
}

.error-message i[b-db2w7ezt9a] {
    flex-shrink: 0;
}

/* Dialog overrides */
[b-db2w7ezt9a] .ai-session-feedback-dialog .e-dlg-content {
    padding: 16px 20px;
}

[b-db2w7ezt9a] .ai-session-feedback-dialog .e-footer-content {
    padding: 12px 20px;
    border-top: 1px solid #eee;
}

[b-db2w7ezt9a] .ai-session-feedback-dialog .e-btn.e-success {
    background: #1976d2;
    border-color: #1976d2;
}

[b-db2w7ezt9a] .ai-session-feedback-dialog .e-btn.e-success:hover {
    background: #1565c0;
    border-color: #1565c0;
}

[b-db2w7ezt9a] .ai-session-feedback-dialog .e-btn.e-success:disabled {
    background: #ccc;
    border-color: #ccc;
}
/* /Shared/Components/AI/MessageDisplayComponent.razor.rz.scp.css */
.message-display-container[b-qkx3io7e8z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

.message-bubble[b-qkx3io7e8z] {
    background: white;
    border-radius: 20px;
    padding: 1.5rem 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    margin-bottom: 1rem;
    width: 100%;
}

.message-text[b-qkx3io7e8z] {
    color: #333;
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: center;
}

.fade-in[b-qkx3io7e8z] {
    animation: fadeIn-b-qkx3io7e8z 0.3s ease-in;
}

@keyframes fadeIn-b-qkx3io7e8z {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Shared/Components/AI/QuickRepliesComponent.razor.rz.scp.css */
.quick-replies-container[b-i3ve6aamaj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: 1rem;
}

.quick-reply-btn[b-i3ve6aamaj] {
    padding: 0.75rem 1.25rem;
    border-radius: 25px;
    border: none;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.quick-reply-btn:hover[b-i3ve6aamaj] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.quick-reply-btn:active[b-i3ve6aamaj] {
    transform: translateY(0);
}

.btn-primary[b-i3ve6aamaj] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-secondary[b-i3ve6aamaj] {
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
}

.btn-secondary:hover[b-i3ve6aamaj] {
    background: #e8e8e8;
}

.btn-success[b-i3ve6aamaj] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

.btn-danger[b-i3ve6aamaj] {
    background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
    color: white;
}

.btn-warning[b-i3ve6aamaj] {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
    color: #333;
}
/* /Shared/Components/AI/TextInputComponent.razor.rz.scp.css */
.text-input-container[b-yhiy5ef061] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.input-label[b-yhiy5ef061] {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.input-wrapper[b-yhiy5ef061] {
    display: flex;
    width: 100%;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.text-input[b-yhiy5ef061] {
    flex: 1;
    padding: 1rem 1.5rem;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.text-input:focus[b-yhiy5ef061] {
    border-color: #667eea;
}

.send-btn[b-yhiy5ef061] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.send-btn:hover:not(:disabled)[b-yhiy5ef061] {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.send-btn:disabled[b-yhiy5ef061] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Shared/Components/AI/WelcomeGreetingComponent.razor.rz.scp.css */
.welcome-container[b-qiv330sx8p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    max-width: 500px;
    margin: 0 auto;
}

.welcome-icon[b-qiv330sx8p] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.welcome-icon .e-icons[b-qiv330sx8p] {
    font-size: 2.5rem;
    color: white;
}

.welcome-message[b-qiv330sx8p] {
    font-size: 1.4rem;
    color: #333;
    text-align: center;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.welcome-actions[b-qiv330sx8p] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 2rem;
}

.welcome-btn[b-qiv330sx8p] {
    padding: 1rem 1.5rem;
    border-radius: 12px;
    border: none;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.welcome-btn:hover[b-qiv330sx8p] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn-primary[b-qiv330sx8p] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-secondary[b-qiv330sx8p] {
    background: white;
    color: #333;
    border: 1px solid #e0e0e0;
}

.btn-secondary:hover[b-qiv330sx8p] {
    background: #f8f8f8;
}

.btn-success[b-qiv330sx8p] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

.text-input-section[b-qiv330sx8p] {
    width: 100%;
}

.input-divider[b-qiv330sx8p] {
    text-align: center;
    color: #999;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    position: relative;
}

.input-divider[b-qiv330sx8p]::before,
.input-divider[b-qiv330sx8p]::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: #e0e0e0;
}

.input-divider[b-qiv330sx8p]::before {
    left: 0;
}

.input-divider[b-qiv330sx8p]::after {
    right: 0;
}

.input-wrapper[b-qiv330sx8p] {
    display: flex;
    gap: 0.5rem;
}

.welcome-input[b-qiv330sx8p] {
    flex: 1;
    padding: 1rem 1.5rem;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.welcome-input:focus[b-qiv330sx8p] {
    border-color: #667eea;
}

.send-btn[b-qiv330sx8p] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.send-btn:hover:not(:disabled)[b-qiv330sx8p] {
    transform: scale(1.05);
}

.send-btn:disabled[b-qiv330sx8p] {
    opacity: 0.5;
    cursor: not-allowed;
}

.fade-in[b-qiv330sx8p] {
    animation: fadeIn-b-qiv330sx8p 0.4s ease-out;
}

@keyframes fadeIn-b-qiv330sx8p {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Shared/Components/Campaign/CampaignProductSelector.razor.rz.scp.css */
.product-selector[b-kruxq2e1qc] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.selector-header[b-kruxq2e1qc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.selector-title[b-kruxq2e1qc] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: #1a1a2e;
}

.selector-count[b-kruxq2e1qc] {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 12px;
    background: #f0f0f0;
    color: #555;
}

.selector-count.count-valid[b-kruxq2e1qc] {
    background: #d4edda;
    color: #155724;
}

.selector-count.count-invalid[b-kruxq2e1qc] {
    background: #f8d7da;
    color: #721c24;
}

.count-hint[b-kruxq2e1qc] {
    font-weight: 400;
    font-size: 0.82em;
    opacity: 0.85;
}

.product-grid[b-kruxq2e1qc] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 900px) {
    .product-grid[b-kruxq2e1qc] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .product-grid[b-kruxq2e1qc] {
        grid-template-columns: 1fr;
    }
}

.product-card[b-kruxq2e1qc] {
    position: relative;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background: #fff;
    user-select: none;
}

.product-card:hover[b-kruxq2e1qc] {
    border-color: #90caf9;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.12);
}

.product-card.selected[b-kruxq2e1qc] {
    border-color: #1976d2;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.18);
}

.product-card.no-image[b-kruxq2e1qc] {
    opacity: 0.6;
    cursor: not-allowed;
}

.card-checkbox[b-kruxq2e1qc] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #bdbdbd;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.15s, border-color 0.15s;
}

.product-card.selected .card-checkbox[b-kruxq2e1qc] {
    background: #1976d2;
    border-color: #1976d2;
}

.check-icon[b-kruxq2e1qc] {
    color: #fff;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
}

.card-image[b-kruxq2e1qc] {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f5f5f5;
}

.card-image img[b-kruxq2e1qc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.no-image-overlay[b-kruxq2e1qc] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
}

.card-body[b-kruxq2e1qc] {
    padding: 8px 10px;
}

.card-name[b-kruxq2e1qc] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #212121;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-category[b-kruxq2e1qc] {
    font-size: 0.75rem;
    color: #757575;
    margin-top: 2px;
}

.selector-footer[b-kruxq2e1qc] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.validation-message[b-kruxq2e1qc] {
    font-size: 0.85rem;
    color: #b71c1c;
    background: #fff3f3;
    border-radius: 6px;
    padding: 6px 12px;
    border: 1px solid #ffcdd2;
    align-self: stretch;
    text-align: center;
}

.btn-generate[b-kruxq2e1qc] {
    padding: 10px 28px;
    background: #1976d2;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-generate:hover:not(.disabled)[b-kruxq2e1qc] {
    background: #1565c0;
}

.btn-generate.disabled[b-kruxq2e1qc],
.btn-generate:disabled[b-kruxq2e1qc] {
    background: #b0bec5;
    cursor: not-allowed;
}
/* /Shared/Components/Campaign/CampaignTimeline.razor.rz.scp.css */
.campaign-timeline[b-4gmpdzhcaa] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.timeline-header[b-4gmpdzhcaa] {
    margin-bottom: 0.5rem;
}

.campaign-theme-box[b-4gmpdzhcaa] {
    background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
    border-radius: 12px;
    padding: 16px 20px;
    border-left: 4px solid #1976d2;
}

.theme-label[b-4gmpdzhcaa] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1976d2;
    margin-bottom: 4px;
}

.theme-name[b-4gmpdzhcaa] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 6px;
}

.theme-desc[b-4gmpdzhcaa] {
    font-size: 0.88rem;
    color: #444;
    line-height: 1.5;
}

.timeline-days[b-4gmpdzhcaa] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.day-group[b-4gmpdzhcaa] {
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    overflow: hidden;
}

.day-header[b-4gmpdzhcaa] {
    background: #1a1a2e;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 8px 14px;
    letter-spacing: 0.03em;
}

.day-slots[b-4gmpdzhcaa] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.slot-card[b-4gmpdzhcaa] {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #eeeeee;
    padding: 10px 14px;
    gap: 12px;
    background: #fff;
}

.slot-card:last-child[b-4gmpdzhcaa] {
    border-bottom: none;
}

.slot-time[b-4gmpdzhcaa] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1976d2;
    background: #e3f2fd;
    border-radius: 6px;
    padding: 4px 8px;
    align-self: flex-start;
    margin-top: 2px;
}

.slot-product[b-4gmpdzhcaa] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.slot-thumb[b-4gmpdzhcaa] {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    border: 1px solid #e0e0e0;
}

.slot-info[b-4gmpdzhcaa] {
    flex: 1;
    min-width: 0;
}

.slot-product-name[b-4gmpdzhcaa] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #212121;
    margin-bottom: 3px;
}

.slot-caption[b-4gmpdzhcaa] {
    font-size: 0.8rem;
    color: #555;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.timeline-actions[b-4gmpdzhcaa] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 0.5rem;
    flex-wrap: wrap;
}

.btn-cancel-timeline[b-4gmpdzhcaa] {
    padding: 10px 22px;
    background: transparent;
    color: #555;
    border: 1px solid #bdbdbd;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-cancel-timeline:hover[b-4gmpdzhcaa] {
    background: #f5f5f5;
    color: #333;
}

.btn-schedule[b-4gmpdzhcaa] {
    padding: 10px 28px;
    background: #2e7d32;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-schedule:hover[b-4gmpdzhcaa] {
    background: #1b5e20;
}
/* /Shared/Components/Checkout/CheckoutButtons.razor.rz.scp.css */
.wrapper[b-g1d4xw469b] {
    width: auto;
    height: auto;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    /*grid-template-columns: 50px auto 65px;*/
    color: #808080;
}

.left[b-g1d4xw469b] {
    /*height: 65px;*/
}

.Center[b-g1d4xw469b] {
    text-align: left;
    /* height: 65px;*/
}

.right[b-g1d4xw469b] {
    /*height: 65px;*/
}

[b-g1d4xw469b] .Pay {
    margin-top: 10px;
    position: absolute;
    right: 0;
}

[b-g1d4xw469b] .BackToShopping {
    margin-top: 10px;
}
/* /Shared/Components/Checkout/CheckoutConfirmation.razor.rz.scp.css */

.MessageToUser[b-e2a6sjttex] {
    font-family: Helvetica, 'Segoe UI' !important;
    vert-align: top;
    padding: 20px;
    font-size: medium;
}

.OrderNumber[b-e2a6sjttex] {
    font-size: 60px;
    width: 3em;
    padding: 0.2em 0.2em;
}

.CardHeader[b-e2a6sjttex] {
    font-size: small;
    color: #808080;
    margin: 5px;
    font-weight: 500;
}

/* DivTable.com */
.divTable[b-e2a6sjttex] {
    font-family: Helvetica, 'Segoe UI' !important;
    display: table;
    width: 90%;
    min-width: 250px;
    margin: 0 auto;
}

.divTableRow[b-e2a6sjttex] {
    display: table-row;
}

.divTableCell[b-e2a6sjttex], .divTableHead[b-e2a6sjttex] {
    border: 0px solid #999999;
    display: table-cell;
    padding: 3px 10px;
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 14px !important;
}

.divTableHeading[b-e2a6sjttex] {
    background-color: #EEE;
    display: table-header-group;
    font-weight: bold;
}

.divTableFoot[b-e2a6sjttex] {
    background-color: #EEE;
    display: table-footer-group;
    font-weight: bold;
}

.divTableBody[b-e2a6sjttex] {
    display: table-row-group;
}

[b-e2a6sjttex] .BackToShopping {
     margin-top: 10px;
 }
/* /Shared/Components/Checkout/CheckoutOrderLineAccordion.razor.rz.scp.css */
cc

.wrapper[b-4t9mgh23y6] {
    width: auto;
    height: auto;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    /*grid-template-columns: 50px auto 65px;*/
    color: #808080;
}

.left[b-4t9mgh23y6] {
    /*height: 65px;*/
}

.Center[b-4t9mgh23y6] {
    text-align: left;
    /* height: 65px;*/
}

.right[b-4t9mgh23y6] {
    /*height: 65px;*/
}

.ProductNumber[b-4t9mgh23y6] {
    position: absolute;
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 14px !important;
    font-weight: 700;
    padding-top: 5px;
    padding-left: 0.6em;
}

.ProductName[b-4t9mgh23y6] {
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 14px !important;
    font-weight: 700;
    padding-top: 5px;
    padding-left: 0.6em;
}

.ProductDescription[b-4t9mgh23y6] {
    padding-top: 2px;
    padding-left: 0.6em;
    word-wrap: break-word;
}

.DescriptionText[b-4t9mgh23y6] {
    width: 97%;
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 12px !important;
}

.ProductPrice[b-4t9mgh23y6] {
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 14px !important;
    font-weight: 700;
    padding-top: 5px;
    padding-left: 0.6em;
    right: 20px;
    position: absolute;
    width: 6em;
}

[b-4t9mgh23y6] .TextBoxMultilineHeight {
    height: 5em;
}
/* /Shared/Components/Checkout/CheckoutPaymentMethodCard.razor.rz.scp.css */
.CardHeader[b-k1pwqjulq3] {
    font-size: small;
    color: #808080;
    margin: 5px;
    font-weight: 500;
}

.wrapper[b-k1pwqjulq3] {
    width: auto;
    height: auto;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    /*grid-template-columns: 50px auto 65px;*/
    color: #808080;
}

.left[b-k1pwqjulq3] {
    /*height: 65px;*/
}

.Center[b-k1pwqjulq3] {
    text-align: left;
    /* height: 65px;*/
}

.right[b-k1pwqjulq3] {
    /*height: 65px;*/
}

.DescriptionText[b-k1pwqjulq3] {
    width: 97%;
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 12px !important;
}

[b-k1pwqjulq3] .e-input:not(:valid), [b-k1pwqjulq3] .e-input:valid, [b-k1pwqjulq3] .e-float-input.e-control-wrapper input:not(:valid), [b-k1pwqjulq3] .e-float-input.e-control-wrapper input:valid, [b-k1pwqjulq3] .e-float-input input:not(:valid), [b-k1pwqjulq3] .e-float-input input:valid, [b-k1pwqjulq3] .e-input-group input:not(:valid), [b-k1pwqjulq3] .e-input-group input:valid, [b-k1pwqjulq3] .e-input-group.e-control-wrapper input:not(:valid), [b-k1pwqjulq3] .e-input-group.e-control-wrapper input:valid, [b-k1pwqjulq3] .e-float-input.e-control-wrapper textarea:not(:valid), [b-k1pwqjulq3] .e-float-input.e-control-wrapper textarea:valid, [b-k1pwqjulq3] .e-float-input textarea:not(:valid), [b-k1pwqjulq3] .e-float-input textarea:valid, [b-k1pwqjulq3] .e-input-group.e-control-wrapper textarea:not(:valid), [b-k1pwqjulq3] .e-input-group.e-control-wrapper textarea:valid, [b-k1pwqjulq3] .e-input-group textarea:not(:valid), [b-k1pwqjulq3] .e-input-group textarea:valid {
    font-size: 30px;
    height: 40px;
}
/* /Shared/Components/Checkout/CheckoutSynopsisCard.razor.rz.scp.css */
.CardHeader[b-oi2zerv159] {
    font-size: small;
    color: #808080;
    margin: 5px;
    font-weight: 500;
}  

.Payment[b-oi2zerv159] {
    font-family: Helvetica, 'Segoe UI' !important;
    vert-align: top;
    padding: 20px;
    font-size: medium;

    /*Why we need this? Perhaps can be merged with MessageToUser*/
    width: 300px;
    margin-right: 0;
    margin-left: auto;
}

/* DivTable.com */
.divTable[b-oi2zerv159] {
    font-family: Helvetica, 'Segoe UI' !important;
    display: table;
    width: 90%;
    min-width: 250px;
    margin: 0 auto;
}

.divTableRow[b-oi2zerv159] {
    display: table-row;
}

.divTableCell[b-oi2zerv159], .divTableHead[b-oi2zerv159] {
    border: 0px solid #999999;
    display: table-cell;
    padding: 3px 10px;
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 14px !important;
}

.divTableHeading[b-oi2zerv159] {
    background-color: #EEE;
    display: table-header-group;
    font-weight: bold;
}

.divTableFoot[b-oi2zerv159] {
    background-color: #EEE;
    display: table-footer-group;
    font-weight: bold;
}

.divTableBody[b-oi2zerv159] {
    display: table-row-group;
}
/* /Shared/Components/Checkout/SwishPhoneNumberTextbox.razor.rz.scp.css */
.CardHeader[b-gt3coamvrw] {
    font-size: small;
    color: #808080;
    margin: 5px;
    font-weight: 500;
}

.wrapper[b-gt3coamvrw] {
    width: auto;
    height: auto;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    /*grid-template-columns: 50px auto 65px;*/
    color: #808080;
}

.left[b-gt3coamvrw] {
    /*height: 65px;*/
}

.Center[b-gt3coamvrw] {
    text-align: left;
    /* height: 65px;*/
}

.right[b-gt3coamvrw] {
    /*height: 65px;*/
}

.DescriptionText[b-gt3coamvrw] {
    width: 97%;
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 12px !important;
}

[b-gt3coamvrw] .e-input:not(:valid), [b-gt3coamvrw] .e-input:valid, [b-gt3coamvrw] .e-float-input.e-control-wrapper input:not(:valid), [b-gt3coamvrw] .e-float-input.e-control-wrapper input:valid, [b-gt3coamvrw] .e-float-input input:not(:valid), [b-gt3coamvrw] .e-float-input input:valid, [b-gt3coamvrw] .e-input-group input:not(:valid), [b-gt3coamvrw] .e-input-group input:valid, [b-gt3coamvrw] .e-input-group.e-control-wrapper input:not(:valid), [b-gt3coamvrw] .e-input-group.e-control-wrapper input:valid, [b-gt3coamvrw] .e-float-input.e-control-wrapper textarea:not(:valid), [b-gt3coamvrw] .e-float-input.e-control-wrapper textarea:valid, [b-gt3coamvrw] .e-float-input textarea:not(:valid), [b-gt3coamvrw] .e-float-input textarea:valid, [b-gt3coamvrw] .e-input-group.e-control-wrapper textarea:not(:valid), [b-gt3coamvrw] .e-input-group.e-control-wrapper textarea:valid, [b-gt3coamvrw] .e-input-group textarea:not(:valid), [b-gt3coamvrw] .e-input-group textarea:valid {
    font-size: 30px;
    height: 40px;
}
/* /Shared/Components/Common/CardLoadingSpinner.razor.rz.scp.css */
.card-loading-container[b-dg0p7t07o4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    border-radius: 4px;
}

.card-loading-spinner[b-dg0p7t07o4] {
    width: 40px;
    height: 40px;
    border: 3px solid #e0e0e0;
    border-top-color: #666;
    border-radius: 50%;
    animation: card-spin-b-dg0p7t07o4 0.8s linear infinite;
}

@keyframes card-spin-b-dg0p7t07o4 {
    to {
        transform: rotate(360deg);
    }
}

.card-loading-text[b-dg0p7t07o4] {
    margin-top: 12px;
    color: #888;
    font-size: 0.9rem;
}
/* /Shared/Components/Common/LoadingImage.razor.rz.scp.css */
.loading-image-container[b-aojug8cecb] {
    position: relative;
    overflow: hidden;
}

.loading-spinner-wrapper[b-aojug8cecb] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    z-index: 1;
}

.loading-spinner[b-aojug8cecb] {
    width: 40px;
    height: 40px;
    border: 3px solid #e0e0e0;
    border-top-color: #666;
    border-radius: 50%;
    animation: spin-b-aojug8cecb 0.8s linear infinite;
}

@keyframes spin-b-aojug8cecb {
    to {
        transform: rotate(360deg);
    }
}

.loading-image[b-aojug8cecb] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease-in-out;
}

.loading-image.loading[b-aojug8cecb] {
    opacity: 0;
}

.loading-image.loaded[b-aojug8cecb] {
    opacity: 1;
}
/* /Shared/Components/Common/PwaUpdateBanner.razor.rz.scp.css */
.pwa-update-banner[b-w0cun5zjm3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #1976d2;
    color: #ffffff;
    cursor: pointer;
    animation: pwa-banner-slide-in-b-w0cun5zjm3 0.3s ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.pwa-update-banner:hover[b-w0cun5zjm3] {
    background: #1565c0;
}

.pwa-update-banner:active[b-w0cun5zjm3] {
    background: #0d47a1;
}

.pwa-update-text[b-w0cun5zjm3] {
    font-size: 0.9rem;
    font-weight: 500;
    flex: 1;
    line-height: 1.3;
}

.pwa-update-dismiss[b-w0cun5zjm3] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    line-height: 1;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s, background 0.15s;
}

.pwa-update-dismiss:hover[b-w0cun5zjm3] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
}

@keyframes pwa-banner-slide-in-b-w0cun5zjm3 {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
/* /Shared/Components/Content/Blocks/ButtonBlock.razor.rz.scp.css */
/* Button Styles */
.ui-btn[b-eqgdjhwmm2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    font-weight: 500;
}

.ui-btn.btn-primary[b-eqgdjhwmm2] {
    background: #1976d2;
    color: white;
}
.ui-btn.btn-primary:hover[b-eqgdjhwmm2] {
    background: #1565c0;
}

.ui-btn.btn-secondary[b-eqgdjhwmm2] {
    background: #e0e0e0;
    color: #333;
}
.ui-btn.btn-secondary:hover[b-eqgdjhwmm2] {
    background: #d5d5d5;
}
/* /Shared/Components/Content/Blocks/MetricBlock.razor.rz.scp.css */
.ui-metric[b-qxlfej85hs] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ui-metric .value[b-qxlfej85hs] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
}

.ui-metric .trend[b-qxlfej85hs] {
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 4px;
    color: #666;
}

.ui-metric .trend.up[b-qxlfej85hs] {
    color: #2e7d32; /* Green */
}
.ui-metric .trend.up[b-qxlfej85hs]::before {
    content: "▲ ";
}

.ui-metric .trend.down[b-qxlfej85hs] {
    color: #c62828; /* Red */
}
.ui-metric .trend.down[b-qxlfej85hs]::before {
    content: "▼ ";
}
/* /Shared/Components/Content/Blocks/StackBlock.razor.rz.scp.css */
/* Custom Gaps for Flexbox (since Bootstrap 4 lacks gap utility) */
.ui-stack.flex-column > * + *[b-u3mm2n1sm8] {
    margin-top: var(--stack-gap, 0.5rem);
}

.ui-stack.flex-row > * + *[b-u3mm2n1sm8] {
    margin-left: var(--stack-gap, 0.5rem);
}

.gap-1[b-u3mm2n1sm8] { --stack-gap: 0.25rem; }
.gap-2[b-u3mm2n1sm8] { --stack-gap: 0.5rem; }
.gap-3[b-u3mm2n1sm8] { --stack-gap: 1rem; }
.gap-4[b-u3mm2n1sm8] { --stack-gap: 1.5rem; }
.gap-5[b-u3mm2n1sm8] { --stack-gap: 3rem; }

.ui-stack[b-u3mm2n1sm8] {
    display: flex;
}

.ui-stack.flex-row[b-u3mm2n1sm8] {
    flex-direction: row;
}

.ui-stack.flex-column[b-u3mm2n1sm8] {
    flex-direction: column;
}
/* /Shared/Components/Content/Blocks/TextBlock.razor.rz.scp.css */
.ui-text-h1[b-morljsc7kc] { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.ui-text-h2[b-morljsc7kc] { font-size: 2rem; font-weight: 600; margin-bottom: 0.5rem; }
.ui-text-h3[b-morljsc7kc] { font-size: 1.75rem; font-weight: 600; margin-bottom: 0.5rem; }
.ui-text-h4[b-morljsc7kc] { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }
.ui-text-h5[b-morljsc7kc] { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.ui-text-h6[b-morljsc7kc] { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
.ui-text-body[b-morljsc7kc] { font-size: 1rem; line-height: 1.5; margin-bottom: 0.5rem; }
.ui-text-caption[b-morljsc7kc] { font-size: 0.875rem; color: #666; margin-bottom: 0.25rem; }
/* /Shared/Components/Content/DynamicCard.razor.rz.scp.css */
/* === Base Card === */
.dynamic-card[b-id2575qv5s] {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    padding: 16px 20px;
    transition: all 0.2s ease;
}

.dynamic-card:hover[b-id2575qv5s] {
    border-color: #bdbdbd;
}

/* === Card Type Variants === */
.dynamic-card.info[b-id2575qv5s] {
    border-left: 3px solid #1976d2;
}

.dynamic-card.action[b-id2575qv5s] {
    border-left: 3px solid #43a047;
}

.dynamic-card.metric[b-id2575qv5s] {
    border-left: 3px solid #7b1fa2;
}

.dynamic-card.ai-suggestion[b-id2575qv5s] {
    border-left: 3px solid #f9a825;
    background: linear-gradient(135deg, #fff 0%, #fffde7 100%);
}

.dynamic-card.welcome-card[b-id2575qv5s] {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-left: 3px solid #1976d2;
}

/* === Card Header === */
.card-header[b-id2575qv5s] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.card-icon[b-id2575qv5s] {
    font-size: 18px;
    color: #757575;
    min-width: 24px;
    text-align: center;
    margin-top: 2px;
}

.dynamic-card.info .card-icon[b-id2575qv5s] {
    color: #1976d2;
}

.dynamic-card.action .card-icon[b-id2575qv5s] {
    color: #43a047;
}

.dynamic-card.metric .card-icon[b-id2575qv5s] {
    color: #7b1fa2;
}

.dynamic-card.ai-suggestion .card-icon[b-id2575qv5s] {
    color: #f9a825;
}

.card-titles[b-id2575qv5s] {
    flex: 1;
}

.card-title[b-id2575qv5s] {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0 0 4px 0;
}

.card-subtitle[b-id2575qv5s] {
    font-size: 13px;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

/* === Card Body === */
.card-body[b-id2575qv5s] {
    margin: 14px 0;
    padding-left: 36px;
}

/* Metric styles */
.metric-body[b-id2575qv5s] {
    text-align: center;
    padding: 12px 0;
}

.metric-value[b-id2575qv5s] {
    font-size: 28px;
    font-weight: 700;
    color: #333;
}

.metric-trend[b-id2575qv5s] {
    font-size: 13px;
    font-weight: 500;
    margin-top: 6px;
}

.metric-trend.up[b-id2575qv5s] {
    color: #43a047;
}

.metric-trend.up[b-id2575qv5s]::before {
    content: "↑ ";
}

.metric-trend.down[b-id2575qv5s] {
    color: #e53935;
}

.metric-trend.down[b-id2575qv5s]::before {
    content: "↓ ";
}

/* Suggestion styles */
.suggestion-body[b-id2575qv5s] {
    padding: 8px 0;
}

.suggestion-text[b-id2575qv5s] {
    font-size: 13px;
    color: #444;
    line-height: 1.5;
    font-style: italic;
}

/* === Card Actions === */
.card-actions[b-id2575qv5s] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e0e0e0;
}

.action-btn[b-id2575qv5s] {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
}

.action-btn.primary[b-id2575qv5s] {
    background: #1976d2;
    color: #fff;
    border-color: #1976d2;
}

.action-btn.primary:hover[b-id2575qv5s] {
    background: #1565c0;
    border-color: #1565c0;
}

.action-btn.secondary[b-id2575qv5s] {
    background: #fff;
    color: #333;
    border-color: #e0e0e0;
}

.action-btn.secondary:hover[b-id2575qv5s] {
    border-color: #1976d2;
    color: #1976d2;
}

.action-btn.danger[b-id2575qv5s] {
    background: #ffebee;
    color: #c62828;
    border-color: #ffcdd2;
}

.action-btn.danger:hover[b-id2575qv5s] {
    background: #ffcdd2;
}

.action-btn i[b-id2575qv5s] {
    font-size: 11px;
}
/* /Shared/Components/Content/PublishedAnalyticsCard.razor.rz.scp.css */
.analytics-card[b-5nvr6p6spe] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.analytics-summary[b-5nvr6p6spe] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.metric[b-5nvr6p6spe] {
    text-align: center;
    padding: 12px;
    background: linear-gradient(135deg, #e3f2fd 0%, #e8f5e9 100%);
    border-radius: 8px;
}

.metric-value[b-5nvr6p6spe] {
    font-size: 24px;
    font-weight: 700;
    color: #1976d2;
    margin-bottom: 4px;
}

.metric-label[b-5nvr6p6spe] {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.top-posts h4[b-5nvr6p6spe] {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px 0;
}

.top-post-item[b-5nvr6p6spe] {
    display: flex;
    gap: 10px;
    padding: 8px;
    background: #fafafa;
    border-radius: 6px;
    margin-bottom: 8px;
    transition: background 0.2s;
}

.top-post-item:hover[b-5nvr6p6spe] {
    background: #f0f0f0;
}

.top-post-item:last-child[b-5nvr6p6spe] {
    margin-bottom: 0;
}

.top-post-item img[b-5nvr6p6spe] {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.top-post-stats[b-5nvr6p6spe] {
    flex: 1;
    min-width: 0;
}

.top-post-stats .caption[b-5nvr6p6spe] {
    font-size: 12px;
    color: #333;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-post-stats .engagement[b-5nvr6p6spe] {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #666;
}

.top-post-stats .engagement span[b-5nvr6p6spe] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.engagement-rate[b-5nvr6p6spe] {
    color: #2e7d32;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .analytics-summary[b-5nvr6p6spe] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .metric-value[b-5nvr6p6spe] {
        font-size: 20px;
    }

    .top-post-item[b-5nvr6p6spe] {
        flex-direction: column;
        align-items: flex-start;
    }

    .top-post-item img[b-5nvr6p6spe] {
        width: 100%;
        height: auto;
        max-height: 200px;
    }
}
/* /Shared/Components/Content/ScheduledPostsCard.razor.rz.scp.css */
.scheduled-posts-card[b-d4s3fruwgh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.posts-list[b-d4s3fruwgh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.post-item[b-d4s3fruwgh] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.2s;
}

.post-item:hover[b-d4s3fruwgh] {
    background: #fff;
    border-color: #1976d2;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.1);
}

.post-thumbnail[b-d4s3fruwgh] {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.post-thumbnail img[b-d4s3fruwgh] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-details[b-d4s3fruwgh] {
    flex: 1;
    min-width: 0;
}

.post-caption[b-d4s3fruwgh] {
    font-size: 13px;
    color: #333;
    font-weight: 500;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-meta[b-d4s3fruwgh] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #666;
}

.post-time[b-d4s3fruwgh] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.post-platforms[b-d4s3fruwgh] {
    display: flex;
    gap: 6px;
}

.post-platforms i[b-d4s3fruwgh] {
    color: #999;
    font-size: 14px;
}

.post-actions[b-d4s3fruwgh] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.btn-edit[b-d4s3fruwgh],
.btn-cancel[b-d4s3fruwgh] {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.btn-edit:hover[b-d4s3fruwgh] {
    background: #e3f2fd;
    border-color: #1976d2;
    color: #1976d2;
}

.btn-cancel:hover[b-d4s3fruwgh] {
    background: #ffebee;
    border-color: #e53935;
    color: #e53935;
}

/* Responsive */
@media (max-width: 768px) {
    .post-item[b-d4s3fruwgh] {
        flex-wrap: wrap;
    }

    .post-actions[b-d4s3fruwgh] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Shared/Components/Content/SmartBotSuggestionsCard.razor.rz.scp.css */
/* SmartBotSuggestionsCard - Bot suggestion card with category-colored indicator */

.bot-card[b-5x9m5uge7c] {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease;
}

.bot-card:hover[b-5x9m5uge7c] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Category-colored left indicator */
.bot-card-indicator[b-5x9m5uge7c] {
    width: 4px;
    flex-shrink: 0;
    background-color: #3b82f6; /* default blue */
}

.bot-card--default .bot-card-indicator[b-5x9m5uge7c] {
    background-color: #3b82f6;
}

.bot-card--schedule-gap .bot-card-indicator[b-5x9m5uge7c] {
    background-color: #f59e0b;
}

.bot-card--weather .bot-card-indicator[b-5x9m5uge7c] {
    background-color: #14b8a6;
}

.bot-card--holiday .bot-card-indicator[b-5x9m5uge7c] {
    background-color: #8b5cf6;
}

.bot-card--anomaly .bot-card-indicator[b-5x9m5uge7c] {
    background-color: #ef4444;
}

/* Card content */
.bot-card-content[b-5x9m5uge7c] {
    padding: 1rem;
    flex: 1;
    min-width: 0;
}

.bot-card-header[b-5x9m5uge7c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Icon colors per category */
.bot-card-icon[b-5x9m5uge7c] {
    font-size: 1.1rem;
    color: #3b82f6;
    flex-shrink: 0;
}

.bot-card--default .bot-card-icon[b-5x9m5uge7c] {
    color: #3b82f6;
}

.bot-card--schedule-gap .bot-card-icon[b-5x9m5uge7c] {
    color: #f59e0b;
}

.bot-card--weather .bot-card-icon[b-5x9m5uge7c] {
    color: #14b8a6;
}

.bot-card--holiday .bot-card-icon[b-5x9m5uge7c] {
    color: #8b5cf6;
}

.bot-card--anomaly .bot-card-icon[b-5x9m5uge7c] {
    color: #ef4444;
}

.bot-card-title[b-5x9m5uge7c] {
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0;
    color: #1f2937;
    line-height: 1.3;
}

.bot-card-subtitle[b-5x9m5uge7c] {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0.5rem 0 0;
    line-height: 1.4;
}

/* Action buttons */
.bot-card-actions[b-5x9m5uge7c] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.bot-action-btn[b-5x9m5uge7c] {
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    border: 1px solid;
    transition: background-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: inherit;
    line-height: 1.4;
}

.bot-action-primary[b-5x9m5uge7c] {
    background: #3b82f6;
    color: #ffffff;
    border-color: transparent;
}

.bot-action-primary:hover[b-5x9m5uge7c] {
    background: #2563eb;
}

.bot-action-secondary[b-5x9m5uge7c] {
    background: transparent;
    color: #6b7280;
    border-color: #e5e7eb;
}

.bot-action-secondary:hover[b-5x9m5uge7c] {
    background: #f3f4f6;
}

.bot-action-danger[b-5x9m5uge7c] {
    background: transparent;
    color: #ef4444;
    border-color: #fecaca;
}

.bot-action-danger:hover[b-5x9m5uge7c] {
    background: #fef2f2;
}
/* /Shared/Components/Financial/ExpenseBreakdownCard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   ExpenseBreakdownCard — scoped styles
   Horizontal bar chart for 6 expense categories.
   Design language: matches Finance.razor.css
   ═══════════════════════════════════════════════════════════ */

/* ── Section wrapper (inside finance-card) ── */

.finance-expense-section[b-00lgqinwwp] {
    /* inherits finance-card */
}

/* ── Card header (flex for right-aligned period) ── */

.finance-card-header[b-00lgqinwwp] {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafafa;
}

.finance-card-title[b-00lgqinwwp] {
    font-size: 14px;
    font-weight: 700;
    color: #334155;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.finance-expense-period[b-00lgqinwwp] {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 400;
    margin-left: auto;
}

/* ── Period Toggle Buttons ── */

.expense-period-toggle[b-00lgqinwwp] {
    display: flex;
    gap: 2px;
    margin-left: auto;
    background: #f1f5f9;
    border-radius: 6px;
    padding: 2px;
}

.expense-period-btn[b-00lgqinwwp] {
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.expense-period-btn:hover[b-00lgqinwwp] {
    color: #334155;
    background: #e2e8f0;
}

.expense-period-btn.active[b-00lgqinwwp] {
    background: #fff;
    color: #0f172a;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* ── Category list ── */

.finance-expense-list[b-00lgqinwwp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Row: 3-column grid: info | bar | pct ── */

.finance-expense-row[b-00lgqinwwp] {
    display: grid;
    grid-template-columns: 1fr 160px 44px;
    align-items: center;
    gap: 12px;
}

/* ── Info block (name + amount) ── */

.finance-expense-info[b-00lgqinwwp] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.finance-expense-name[b-00lgqinwwp] {
    font-size: 13px;
    color: #334155;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.finance-expense-amount[b-00lgqinwwp] {
    font-size: 12px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Bar track and fill ── */

.finance-expense-bar-track[b-00lgqinwwp] {
    height: 8px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
}

.finance-expense-bar-fill[b-00lgqinwwp] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Percentage label ── */

.finance-expense-pct[b-00lgqinwwp] {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Responsive ── */

@media (max-width: 900px) {
    .finance-expense-row[b-00lgqinwwp] {
        grid-template-columns: 1fr 120px 40px;
    }
}

@media (max-width: 640px) {
    .finance-expense-row[b-00lgqinwwp] {
        grid-template-columns: 1fr 80px 36px;
    }
}
/* /Shared/Components/Financial/KpiInlineChart.razor.rz.scp.css */
.kpi-inline-chart[b-vy8iubnyvy] {
    padding: 12px 16px;
}

.kpi-chart-skeleton[b-vy8iubnyvy] {
    height: 250px;
    border-radius: 8px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: kpi-shimmer-b-vy8iubnyvy 1.5s ease-in-out infinite;
}

@keyframes kpi-shimmer-b-vy8iubnyvy {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.kpi-toolbar[b-vy8iubnyvy] {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.kpi-toggle-group[b-vy8iubnyvy] {
    display: flex;
    gap: 2px;
    background: #f1f5f9;
    border-radius: 6px;
    padding: 2px;
}

.kpi-toggle-btn[b-vy8iubnyvy] {
    border: none;
    background: transparent;
    padding: 4px 12px;
    font-size: 0.78rem;
    color: #64748b;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
    font-family: inherit;
}

.kpi-toggle-btn:hover[b-vy8iubnyvy] {
    color: #334155;
}

.kpi-toggle-btn.active[b-vy8iubnyvy] {
    background: white;
    color: #1e293b;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.kpi-no-prior[b-vy8iubnyvy] {
    text-align: center;
    color: #94a3b8;
    font-size: 0.8rem;
    margin-top: 8px;
    margin-bottom: 0;
}

.kpi-no-weekly[b-vy8iubnyvy] {
    text-align: center;
    color: #94a3b8;
    font-size: 0.8rem;
    margin-top: 8px;
    margin-bottom: 0;
}
/* /Shared/Components/Financial/ProductSalesSection.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   ProductSalesSection — scoped styles
   Expandable category table with sticky footer
   ═══════════════════════════════════════════════════════════ */

.ps-container[b-4x2ofydje8] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Period Selectors ── */

.ps-filters[b-4x2ofydje8] {
    display: flex;
    gap: 8px;
}

.ps-select[b-4x2ofydje8] {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    background: #fff;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ps-select:focus[b-4x2ofydje8] {
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
}

/* ── Loading ── */

.ps-loading[b-4x2ofydje8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 24px;
    color: #64748b;
    font-size: 14px;
}

.ps-loading i[b-4x2ofydje8] {
    font-size: 18px;
    color: #14b8a6;
}

/* ── Empty State ── */

.ps-empty[b-4x2ofydje8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-align: center;
    gap: 8px;
}

.ps-empty i[b-4x2ofydje8] {
    font-size: 32px;
    color: #cbd5e1;
    margin-bottom: 4px;
}

.ps-empty p[b-4x2ofydje8] {
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    margin: 0;
}

.ps-empty-hint[b-4x2ofydje8] {
    font-size: 12px;
    color: #94a3b8;
}

/* ── Table ── */

.ps-table-wrapper[b-4x2ofydje8] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.ps-table[b-4x2ofydje8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

/* ── Header ── */

.ps-th[b-4x2ofydje8] {
    position: sticky;
    top: 0;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.15s;
    z-index: 2;
}

.ps-th:hover[b-4x2ofydje8] {
    color: #0f172a;
}

.ps-th i[b-4x2ofydje8] {
    margin-left: 4px;
    font-size: 9px;
    opacity: 0.4;
}

.ps-th.ps-sorted-asc i[b-4x2ofydje8],
.ps-th.ps-sorted-desc i[b-4x2ofydje8] {
    opacity: 1;
    color: #14b8a6;
}

.ps-th-name[b-4x2ofydje8] {
    text-align: left;
    width: 45%;
}

.ps-th-qty[b-4x2ofydje8],
.ps-th-amount[b-4x2ofydje8],
.ps-th-vat[b-4x2ofydje8] {
    text-align: right;
}

/* ── Rows ── */

.ps-td[b-4x2ofydje8] {
    padding: 8px 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.ps-td-name[b-4x2ofydje8] {
    text-align: left;
}

.ps-td-qty[b-4x2ofydje8],
.ps-td-amount[b-4x2ofydje8],
.ps-td-vat[b-4x2ofydje8] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Category rows */

.ps-category-row[b-4x2ofydje8] {
    cursor: pointer;
    background: #fafbfc;
    transition: background 0.15s;
}

.ps-category-row:hover[b-4x2ofydje8] {
    background: #f1f5f9;
}

.ps-category-row .ps-td[b-4x2ofydje8] {
    border-bottom-color: #e2e8f0;
}

.ps-chevron[b-4x2ofydje8] {
    font-size: 10px;
    color: #94a3b8;
    margin-right: 8px;
    transition: transform 0.15s;
    width: 12px;
    display: inline-block;
}

.ps-category-count[b-4x2ofydje8] {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 400;
    margin-left: 4px;
}

/* Product rows */

.ps-product-row[b-4x2ofydje8] {
    transition: background 0.1s;
}

.ps-product-row:hover[b-4x2ofydje8] {
    background: #f8fafc;
}

.ps-indent[b-4x2ofydje8] {
    padding-left: 40px;
}

/* ── Negative Amounts ── */

.ps-negative[b-4x2ofydje8] {
    color: #dc2626;
    font-weight: 500;
}

/* ── Grand Total Footer ── */

.ps-grand-total[b-4x2ofydje8] {
    display: grid;
    grid-template-columns: 45% 1fr 1fr 1fr;
    padding: 12px 16px;
    background: #0f172a;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    position: sticky;
    bottom: 0;
    z-index: 2;
}

.ps-grand-label[b-4x2ofydje8] {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
}

.ps-grand-qty[b-4x2ofydje8],
.ps-grand-amount[b-4x2ofydje8],
.ps-grand-vat[b-4x2ofydje8] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ps-grand-total .ps-negative[b-4x2ofydje8] {
    color: #fca5a5;
}

/* ══════════════════════════════════════
   KPI Card Grid (scoped copy — Blazor CSS does not cascade to children)
   ══════════════════════════════════════ */

.finance-kpi-grid[b-4x2ofydje8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.finance-kpi-card[b-4x2ofydje8] {
    position: relative;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-left: 3px solid #e2e8f0;
    transition: box-shadow 0.2s;
}

.finance-kpi-card:hover[b-4x2ofydje8] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.finance-kpi-card.accent-teal[b-4x2ofydje8] {
    border-left-color: #14b8a6;
}

.finance-kpi-label[b-4x2ofydje8] {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.finance-kpi-value[b-4x2ofydje8] {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.finance-kpi-value-sm[b-4x2ofydje8] {
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.finance-kpi-sub[b-4x2ofydje8] {
    font-size: 11px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.finance-kpi-delta[b-4x2ofydje8] {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
}

.finance-kpi-delta.up[b-4x2ofydje8]::before   { content: "\2191 "; color: #22c55e; }
.finance-kpi-delta.down[b-4x2ofydje8]::before { content: "\2193 "; color: #ef4444; }

.finance-kpi-card.skeleton[b-4x2ofydje8] {
    pointer-events: none;
}

.finance-skeleton-label[b-4x2ofydje8] {
    height: 11px;
    width: 60%;
    border-radius: 4px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: finShimmer-b-4x2ofydje8 1.5s infinite;
}

.finance-skeleton-value[b-4x2ofydje8] {
    height: 28px;
    width: 80%;
    border-radius: 6px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: finShimmer-b-4x2ofydje8 1.5s infinite;
    margin-top: 8px;
}

@keyframes finShimmer-b-4x2ofydje8 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════
   Responsive
   ══════════════════════════════════════ */

@media (max-width: 900px) {
    .finance-kpi-grid[b-4x2ofydje8] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 400px) {
    .finance-kpi-grid[b-4x2ofydje8] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .ps-th[b-4x2ofydje8],
    .ps-td[b-4x2ofydje8] {
        padding: 8px 10px;
        font-size: 12px;
    }

    .ps-th-vat[b-4x2ofydje8],
    .ps-td-vat[b-4x2ofydje8] {
        display: none;
    }

    .ps-grand-total[b-4x2ofydje8] {
        grid-template-columns: 45% 1fr 1fr;
    }

    .ps-grand-vat[b-4x2ofydje8] {
        display: none;
    }

    .ps-indent[b-4x2ofydje8] {
        padding-left: 28px;
    }
}

/* ── Sparkline inline wrapper ── */

.ps-product-name-wrapper[b-4x2ofydje8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ps-product-name-text[b-4x2ofydje8] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}
/* /Shared/Components/Financial/ProductSparkline.razor.rz.scp.css */
.ps-sparkline[b-qz51rll8f3] {
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    height: 22px;
    flex-shrink: 0;
    overflow: visible;
}

.ps-sparkline-dash[b-qz51rll8f3] {
    display: inline-block;
    vertical-align: middle;
    color: #cbd5e1;
    font-size: 14px;
    margin-left: 6px;
}
/* /Shared/Components/Financial/ProductTrendChart.razor.rz.scp.css */
.trend-chart-container[b-wfumjdvcds] {
    margin-bottom: 1.5rem;
    background: var(--surface-card, #1e293b);
    border-radius: 0.75rem;
    padding: 1rem 1rem 0.5rem;
}

.trend-chart-header[b-wfumjdvcds] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.trend-chart-skeleton[b-wfumjdvcds] {
    height: 300px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.5rem;
}

@@keyframes shimmer {
    0%[b-wfumjdvcds] { background-position: -200% 0; }
    100%[b-wfumjdvcds] { background-position: 200% 0; }
}
/* /Shared/Components/Financial/ProfitTrendCard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   ProfitTrendCard — scoped styles
   Rolling 12-month dual bar chart (gross profit + net result)
   with YoY / MoM comparison KPI cards.
   Design language: matches Finance.razor.css
   ═══════════════════════════════════════════════════════════ */

/* ── Section wrapper ── */

.finance-profit-section[b-vdstnfyq2s] {
    /* inherits finance-card */
}

/* ── KPI Comparison Grid (2x2) ── */

.finance-profit-kpi-grid[b-vdstnfyq2s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.finance-profit-kpi-card[b-vdstnfyq2s] {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.finance-profit-kpi-label[b-vdstnfyq2s] {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.finance-profit-kpi-value[b-vdstnfyq2s] {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    display: flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}

.finance-profit-kpi-value.positive[b-vdstnfyq2s] {
    color: #15803d;
}

.finance-profit-kpi-value.negative[b-vdstnfyq2s] {
    color: #dc2626;
}

.finance-profit-kpi-value.neutral[b-vdstnfyq2s] {
    color: #94a3b8;
    font-size: 16px;
}

.finance-profit-kpi-value i[b-vdstnfyq2s] {
    font-size: 13px;
}

.finance-profit-kpi-sub[b-vdstnfyq2s] {
    font-size: 11px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

/* ── Bar Chart ── */

.finance-profit-chart[b-vdstnfyq2s] {
    display: flex;
    align-items: flex-end;
    gap: 0;
    height: 180px;
    padding: 0 0.25rem;
}

.finance-profit-chart-single[b-vdstnfyq2s] {
    justify-content: center;
    align-items: flex-end;
}

.finance-profit-col[b-vdstnfyq2s] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
}

.finance-profit-chart-bars[b-vdstnfyq2s] {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 100%;
    padding: 0 2px;
}

.finance-profit-bar[b-vdstnfyq2s] {
    flex: 1;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
    cursor: default;
}

/* Teal gradient for gross profit (matches revenue aesthetic) */
.finance-profit-bar.gross[b-vdstnfyq2s] {
    background: linear-gradient(180deg, #2dd4bf, #0d9488);
    opacity: 0.9;
}

/* Indigo/blue gradient for net profit — visually distinct */
.finance-profit-bar.net[b-vdstnfyq2s] {
    background: linear-gradient(180deg, #818cf8, #4f46e5);
    opacity: 0.9;
}

.finance-profit-bar:hover[b-vdstnfyq2s] {
    opacity: 1;
    filter: brightness(1.12);
}

/* ── Month Labels ── */

.finance-profit-label[b-vdstnfyq2s] {
    font-size: 9px;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Legend ── */

.finance-profit-legend[b-vdstnfyq2s] {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.finance-profit-legend-item[b-vdstnfyq2s] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.finance-profit-legend-dot[b-vdstnfyq2s] {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.finance-profit-legend-dot.gross[b-vdstnfyq2s] {
    background: #0d9488;
}

.finance-profit-legend-dot.net[b-vdstnfyq2s] {
    background: #4f46e5;
}

.finance-profit-legend-prior[b-vdstnfyq2s] {
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
}

/* ── Balance-only note ── */

.finance-profit-balance-note[b-vdstnfyq2s] {
    margin-top: 10px;
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
    font-style: italic;
}

/* ── Responsive ── */

@media (max-width: 640px) {
    .finance-profit-kpi-grid[b-vdstnfyq2s] {
        grid-template-columns: 1fr;
    }

    .finance-profit-chart[b-vdstnfyq2s] {
        height: 130px;
    }

    .finance-profit-kpi-value[b-vdstnfyq2s] {
        font-size: 18px;
    }
}
/* /Shared/Components/Financial/RevenueTrendCard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   RevenueTrendCard — scoped styles
   Rolling 12-month bar chart with YoY / MoM KPI cards.
   Design language: matches Finance.razor.css
   ═══════════════════════════════════════════════════════════ */

/* ── Section wrapper (inside finance-card) ── */

.finance-trend-section[b-pa1dr0bvaw] {
    /* inherits finance-card */
}

/* ── KPI Comparison Grid (2 columns) ── */

.finance-trend-kpi-grid[b-pa1dr0bvaw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.finance-trend-kpi-card[b-pa1dr0bvaw] {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.finance-trend-kpi-label[b-pa1dr0bvaw] {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.finance-trend-kpi-value[b-pa1dr0bvaw] {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    display: flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}

.finance-trend-kpi-value.positive[b-pa1dr0bvaw] {
    color: #15803d;
}

.finance-trend-kpi-value.negative[b-pa1dr0bvaw] {
    color: #dc2626;
}

.finance-trend-kpi-value.neutral[b-pa1dr0bvaw] {
    color: #94a3b8;
    font-size: 16px;
}

.finance-trend-kpi-value i[b-pa1dr0bvaw] {
    font-size: 13px;
}

.finance-trend-kpi-sub[b-pa1dr0bvaw] {
    font-size: 11px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

/* ── Bar Chart ── */

.finance-trend-chart[b-pa1dr0bvaw] {
    display: flex;
    align-items: flex-end;
    gap: 0;
    height: 180px;
    padding: 0 0.25rem;
}

.finance-trend-chart-single[b-pa1dr0bvaw] {
    justify-content: center;
    align-items: flex-end;
}

.finance-trend-col[b-pa1dr0bvaw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
}

.finance-trend-chart-bars[b-pa1dr0bvaw] {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 100%;
    padding: 0 3px;
}

.finance-trend-bar[b-pa1dr0bvaw] {
    flex: 1;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
    cursor: default;
}

.finance-trend-bar.revenue[b-pa1dr0bvaw] {
    background: linear-gradient(180deg, #14b8a6, #0f766e);
}

.finance-trend-bar:hover[b-pa1dr0bvaw] {
    opacity: 0.85;
    filter: brightness(1.12);
}

/* ── Month Labels ── */

.finance-trend-label[b-pa1dr0bvaw] {
    font-size: 9px;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Legend ── */

.finance-trend-legend[b-pa1dr0bvaw] {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.finance-trend-legend-item[b-pa1dr0bvaw] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.finance-trend-legend-dot[b-pa1dr0bvaw] {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.finance-trend-legend-dot.revenue[b-pa1dr0bvaw] {
    background: #0f766e;
}

.finance-trend-legend-prior[b-pa1dr0bvaw] {
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
}

/* ── Balance-only note ── */

.finance-trend-balance-note[b-pa1dr0bvaw] {
    margin-top: 10px;
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
    font-style: italic;
}

/* ── Responsive ── */

@media (max-width: 640px) {
    .finance-trend-kpi-grid[b-pa1dr0bvaw] {
        grid-template-columns: 1fr;
    }

    .finance-trend-chart[b-pa1dr0bvaw] {
        height: 130px;
    }

    .finance-trend-kpi-value[b-pa1dr0bvaw] {
        font-size: 18px;
    }
}
/* /Shared/Components/Frontier/FrontierAccordion.razor.rz.scp.css */
.wrapper[b-f2e5512wlv] {
width: auto;
height: auto;
box-sizing: border-box;
display: grid;
grid-auto-flow: row;
/*grid-template-columns: 50px auto 65px;*/
color: #808080;
}

.left[b-f2e5512wlv] {
/*height: 65px;*/
}

.Center[b-f2e5512wlv] {
text-align: left;
/* height: 65px;*/
}

.right[b-f2e5512wlv] {
/*height: 65px;*/
}


.ProductNumber[b-f2e5512wlv] {
    position: absolute;
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 14px !important;
    font-weight: 700;
    padding-top: 10px;
    padding-left: 0.6em;
}

.ProductName[b-f2e5512wlv] {
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 14px !important;
    font-weight: 700;
    padding-top: 10px;
    padding-left: 0.6em;
}

.ProductDescription[b-f2e5512wlv] {
    padding-top: 2px;
    padding-left: 0.6em;
    word-wrap: break-word;
}

.DescriptionText[b-f2e5512wlv] {
    width: 97%;
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 12px !important;
}

.ProductPrice[b-f2e5512wlv] {
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 14px !important;
    font-weight: 700;
    padding-top: 10px;
    right: 10px; 
    position: absolute;
    width: 6em;
    /*margin-right: 15px;*/
}

.CardHeader[b-f2e5512wlv] {
    font-size: small;
    color: #808080;
    margin: 5px;
    font-weight: 500;
}
/* /Shared/Components/Frontier/FrontierActionCard.razor.rz.scp.css */
.wrapper[b-g16xsvi7wp] {
    width: auto;
    height: auto;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(6, 1fr);
}

.wrapper-left[b-g16xsvi7wp] {
    text-align: left;
    grid-column: 1/1;
    border: 1px;
    padding: 0 2px;
}

.wrapper-right[b-g16xsvi7wp] {
    text-align: right;
    grid-column: 3/7;
    border: 1px;
}

[b-g16xsvi7wp] .Frontier-Action-Card {
    margin-top: 5px;
}

[b-g16xsvi7wp] .e-btn {
    background-color: #FFFFFF;
    color: #000000;
}
/* /Shared/Components/Frontier/FrontierGridCard.razor.rz.scp.css */

[b-9o8rk0qb9w] .Frontier-grid-card {
    width: 98%;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    border: 2px solid rgba(0,0,0,0.10);
}

[b-9o8rk0qb9w] .Frontier-grid-card-selected {
    border: 2px solid rgba(0,0,0,0.40);
}

[b-9o8rk0qb9w] .e-dropdown-btn.e-custom {
    width: 100%;
    font-size: 28px;
    background: rgba(255, 255, 255, 0.7);
    color: black;
}

.grid-container[b-9o8rk0qb9w] {
    display: grid;
    grid-template-columns: auto auto;
    padding: 10px;
    font-size: 14px;
}

.grid-item-left[b-9o8rk0qb9w] {
    font-size: small;
    text-align: left;
    border-bottom: 2px solid #cccccc;
    color: #202020;
    font-size: smaller;
    padding-bottom: 5px;
}

.grid-item-right[b-9o8rk0qb9w] {
    font-size: small;
    text-align: right;
    border-bottom: 2px solid #cccccc;
    color: #202020;
    font-size: smaller;
    padding-bottom: 2px;
}

.grid-item-wide-Span-2[b-9o8rk0qb9w]{
    grid-column: span 2;
    margin-left: 0;
    padding-bottom: 20px;
}

.Frontier-Grid-Queue-wrapper[b-9o8rk0qb9w] {
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(6, 1fr);
}

.Frontier-Grid-Queue-left[b-9o8rk0qb9w] {
    text-align: left;
    grid-column: 1/1;
    padding: 0 2px;
}

.Frontier-Grid-Queue-right[b-9o8rk0qb9w] {
    text-align: right;
    grid-column: 6/7;
}

.Frontier-Queue[b-9o8rk0qb9w] {
    font-size: 1.5em;
}
/* /Shared/Components/Frontier/FrontierMainCard.razor.rz.scp.css */
[b-1mqq2viabk] .MainOrderCard {
    /*min-height: 55vh;*/
    padding: 20px 0;
}

[b-1mqq2viabk] .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    color: #33383e;
}

[b-1mqq2viabk] .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
        background: #E8E8E8 !important;
}

[b-1mqq2viabk] .e-tab .e-tab-header .e-toolbar-item.e-active {
    background: #E8E8E8;
}

.Frontier-Main-Queue-wrapper[b-1mqq2viabk] {
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(6, 1fr);
}

.Frontier-Main-Queue-left[b-1mqq2viabk] {
    text-align: left;
    grid-column: 1/1;
    padding: 0 2px;
}

.Frontier-Main-Queue-right[b-1mqq2viabk] {
    text-align: right;
    grid-column: 6/7;
}

.Frontier-Queue[b-1mqq2viabk] {
    font-size: 2em;
}

.wrapper[b-1mqq2viabk] {
    width: auto;
    height: auto;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(6, 1fr);
}

.left[b-1mqq2viabk] {
    text-align: left;
    grid-column: 1/1;
    border: 1px;
    padding: 0 2px;
}

.right[b-1mqq2viabk] {
    text-align: right;
    grid-column: 3/7;
    border: 1px;
}
/* /Shared/Components/Frontier/FrontierOrderEventListView.razor.rz.scp.css */
.EventWrapper[b-vzl03gt728] {
    width: auto;
    height: 50px;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 50px auto 50px;
    font-family: Helvetica, 'Segoe UI' !important;
}

.EventLeft[b-vzl03gt728] {
    /*padding-top: 10px;*/
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    /*line-height: 60px;*/
    padding-top: 12px;
}

.EventCenter[b-vzl03gt728] {
    text-align: left;
    /*margin-left: 20px;*/
    padding: 5px;
}

.EventRight[b-vzl03gt728] {
    text-align: left;
    /*padding-right: 10px;*/
    padding: 5px;
}

[b-vzl03gt728] .e-listview {
    border-top: 0;
    border-right: 1px #CCCCCC;
    border-bottom: 1px #CCCCCC;
    border-left: 0;
}

.DateAndSource[b-vzl03gt728] {
    font-family: Helvetica, 'Segoe UI' !important;
    width: 95%;
    font-size: x-small;
    font-weight: 700;
    padding-top: 4px;
    color: #C0C0C0;
}

.Description[b-vzl03gt728] {
    font-family: Helvetica, 'Segoe UI' !important;
    width: 95%;
    font-size: medium;
    padding-top: 5px;
    /*color: #808080;*/
}

[b-vzl03gt728] .e-ViewButton {
    background: rgba(255, 255, 255, 0.7);
    color: #6c757d;
    margin-top: 5px;
    margin-right: 5px;
    width: 2.5rem;
    font-size: 11px;
}

.greenCSSPopup + .e-dlg-overlay[b-vzl03gt728] {
    background-color: #000;
    opacity: .2;
}
/* /Shared/Components/Frontier/FrontierOrderLineAccordion.razor.rz.scp.css */
.wrapper[b-7fa8notair] {
width: auto;
height: auto;
box-sizing: border-box;
display: grid;
grid-auto-flow: row;
/*grid-template-columns: 50px auto 65px;*/
color: #808080;
}

.left[b-7fa8notair] {
/*height: 65px;*/
}

.Center[b-7fa8notair] {
text-align: left;
/* height: 65px;*/
}

.right[b-7fa8notair] {
/*height: 65px;*/
}


.ProductNumber[b-7fa8notair] {
position: absolute;
font-family: Helvetica, 'Segoe UI' !important;
font-size: 14px !important;
font-weight: 700;
padding-top: 10px;
padding-left: 0.6em;
}

.ProductName[b-7fa8notair] {
font-family: Helvetica, 'Segoe UI' !important;
font-size: 14px !important;
font-weight: 700;
padding-top: 10px;
padding-left: 0.6em;
}

.ProductDescription[b-7fa8notair] {
padding-top: 2px;
padding-left: 0.6em;
word-wrap: break-word;
}

.DescriptionText[b-7fa8notair] {
width: 97%;
font-family: Helvetica, 'Segoe UI' !important;
font-size: 12px !important;
}

.ProductPrice[b-7fa8notair] {
font-family: Helvetica, 'Segoe UI' !important;
font-size: 14px !important;
/*font-weight: 700;*/
padding-top: 10px;
right: 10px; 
position: absolute;
width: 6em;
/*margin-right: 15px;*/
}

.CardHeader[b-7fa8notair] {
font-size: small;
color: #808080;
margin: 5px;
font-weight: 500;
}
/* /Shared/Components/Frontier/FrontierOrderLineListView.razor.rz.scp.css */
.wrapper[b-czx0z1ywx4] {
    width: auto;
    height: auto;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(6, 1fr);
}

.left[b-czx0z1ywx4] {
    text-align: left;
    grid-column: 1/1;
    border: 1px;
    padding: 0 2px;
}

.right[b-czx0z1ywx4] {
    text-align: right;
    grid-column: 3/7;
    border: 1px;
}
/* /Shared/Components/Layout/AttributeDialog.razor.rz.scp.css */
[b-lyj3galeuc] .Action-Card {
    margin-top: 5px;
}

[b-lyj3galeuc] .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    color: #33383e;
}

[b-lyj3galeuc] .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
    background: #E8E8E8 !important;
}

[b-lyj3galeuc] .e-tab .e-tab-header .e-toolbar-item.e-active {
    background: #E8E8E8;
}

.wrapper[b-lyj3galeuc] {
    width: auto;
    height: auto;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(6, 1fr);
}

.wrapper-left[b-lyj3galeuc] {
    text-align: left;
    grid-column: 1/1;
    border: 1px;
    padding: 0 2px;
}

.wrapper-right[b-lyj3galeuc] {
    text-align: right;
    grid-column: 3/7;
    border: 1px;
}

.DescriptionText[b-lyj3galeuc] {
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 12px !important;
    margin-top: 15px;
    margin-bottom: 5px;
}

.square-container[b-lyj3galeuc] {
    width: 100%; /* Set the desired width */
    height: 100%; /* Set the desired height */
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
}

.square-image[b-lyj3galeuc] {
    width: 100%; /* Make the image fill the container */
    height: 100%; /* Make the image fill the container */
    object-fit: cover; /* Maintain aspect ratio and cover the container */
}

.Attribute-Main-Queue-wrapper[b-lyj3galeuc] {
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(6, 1fr);
    margin-top: 5px; 
    margin-bottom: 5px; 
}

.Attribute-Main-Queue-left[b-lyj3galeuc] {
    text-align: left;
    grid-column: 1 / span 2; /* This will make it span from column 1 to column 2 */
    padding: 0 2px;
}

.Attribute-Main-Queue-right[b-lyj3galeuc] {
    padding-left 5px; 
    text-align: left;
    grid-column: 3 / span 6; /* This will make it span from column 2 to column 6 */
    padding-left: 5px; 

}


/* /Shared/Components/Layout/CategoryGridLayout.razor.rz.scp.css */
/* Structural grid rules only — NO colors/fonts here. Tenant-specific overrides use design-system tokens. */
.aisushi-category-grid[b-f2be6obots] {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

.aisushi-category-grid-cell[b-f2be6obots] {
    min-width: 0;
    min-height: 44px; /* CONTEXT D-24 touch target */
}
/* /Shared/Components/Layout/OneColumnMediumLayout.razor.rz.scp.css */
/* Shared styles moved to app.css */
/* This file intentionally minimal - no unique styles needed */
/* /Shared/Components/Layout/OneColumnSmallLayout.razor.rz.scp.css */
/* Shared styles moved to app.css */
/* This file intentionally minimal - no unique styles needed */
/* /Shared/Components/Layout/ThreeColumnLayout.razor.rz.scp.css */
/* ThreeColumnLayout — Wave 1 token migration
   Shared layout title/wrapper styles live in app.css.
   Token source: qonnect-design-system/project/colors_and_type.css */

@media only screen and (min-width: 768px) {
    .LeftPadding[b-1ssn34wbvi] {
        padding-right: var(--space-2);
    }

    .MiddlePadding[b-1ssn34wbvi] {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    .RightPadding[b-1ssn34wbvi] {
        padding-left: var(--space-2);
    }
}
/* /Shared/Components/Layout/TwoColumnLayout.razor.rz.scp.css */
/* Shared styles moved to app.css */

@media only screen and (min-width: 768px) {
    .RightPadding[b-1t3v2a6v5a] {
        padding-right: 7px;
    }

    .LeftPadding[b-1t3v2a6v5a] {
        padding-left: 7px;
    }
}
/* /Shared/Components/Layout/TwoColumnLeftRightLayout.razor.rz.scp.css */
/* TwoColumnLeftRightLayout — Wave 1 token migration
   Shared layout title/subtitle/wrapper styles live in app.css (scoped CSS can't share across components).
   Token source: qonnect-design-system/project/colors_and_type.css */

@media only screen and (min-width: 768px) {
    .RightPadding[b-bxotu27wvh] {
        padding-right: var(--space-2);
    }

    .LeftPadding[b-bxotu27wvh] {
        padding-left: var(--space-2);
    }
}
/* /Shared/Components/Marketing/AutonomousSettingsPanel.razor.rz.scp.css */
/* AutonomousSettingsPanel — Phase 215. No hex literals (RazorCssNoHexLiteralsTest gate). */

/* Outer shell (UI-SPEC §2) */
.autonomous-settings-panel[b-sbbv79ggdc] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-4);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.settings-panel-heading[b-sbbv79ggdc] {
    font-size: var(--size-400);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    margin: 0;
}

/* 2a — toggle row */
.settings-toggle-row[b-sbbv79ggdc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.settings-toggle-label[b-sbbv79ggdc] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.settings-label-text[b-sbbv79ggdc] {
    font-size: var(--size-400);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
}

.settings-label-helper[b-sbbv79ggdc] {
    display: block;
    font-size: var(--size-300);
    font-weight: var(--weight-regular);
    color: var(--text-secondary);
    margin-top: var(--space-1);
}

/* Native checkbox styled as a sliding switch.
   appearance:none erases the default UA box; ::before paints the thumb. */
.settings-toggle[b-sbbv79ggdc] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: var(--touch-target-min);
    min-width: var(--touch-target-min);
    height: 24px;
    background: var(--border-strong);
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--dur-fast) var(--curve-default);
    flex-shrink: 0;
    margin: 0;
}

.settings-toggle:checked[b-sbbv79ggdc] {
    background: var(--accent);
}

.settings-toggle[b-sbbv79ggdc]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--surface);
    border-radius: var(--radius-pill);
    transition: transform var(--dur-fast) var(--curve-default);
}

.settings-toggle:checked[b-sbbv79ggdc]::before {
    transform: translateX(20px);
}

.settings-toggle:disabled[b-sbbv79ggdc] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Save indicator (in-flight) */
.settings-save-indicator[b-sbbv79ggdc] {
    font-size: var(--size-200);
    color: var(--text-muted);
}

/* Save error toast (UI-SPEC §"Copywriting Contract" lines 327-328 + D-09 revert path).
   Banner-style left-rule using var(--status-err); no tinted fill (status token rule). */
.settings-error-toast[b-sbbv79ggdc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--status-err);
    font-size: var(--size-300);
    color: var(--text-body);
}

.settings-error-toast b[b-sbbv79ggdc] {
    font-weight: var(--weight-semi);
    color: var(--text-primary);
}

/* 2b — conflict banner (warn variant). Left-rule + dot only; surface stays neutral. */
.settings-conflict-banner[b-sbbv79ggdc] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-3);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: var(--size-300);
    color: var(--text-primary);
}

.settings-conflict-banner.warn[b-sbbv79ggdc] {
    border-left: 3px solid var(--status-warn);
}

.settings-conflict-banner .dot[b-sbbv79ggdc] {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--status-warn);
    flex-shrink: 0;
    margin-top: 5px;
}

.settings-conflict-banner .bd[b-sbbv79ggdc] {
    flex: 1;
    line-height: 1.5;
    color: var(--text-body);
}

.settings-conflict-banner .bd b[b-sbbv79ggdc] {
    display: block;
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.settings-conflict-banner .act[b-sbbv79ggdc] {
    flex-shrink: 0;
}

.btn-activate[b-sbbv79ggdc] {
    min-height: 32px;
    padding: var(--space-1) var(--space-3);
    background: var(--accent);
    color: var(--text-on-accent);
    border: none;
    border-radius: var(--radius-2);
    font-size: var(--size-200);
    font-weight: var(--weight-medium);
    cursor: pointer;
    white-space: nowrap;
}

.btn-activate:disabled[b-sbbv79ggdc] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* 2c — threshold + daily-cap read-out (display only, D-10) */
.settings-read-row[b-sbbv79ggdc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.settings-read-label[b-sbbv79ggdc] {
    font-size: var(--size-300);
    font-weight: var(--weight-regular);
    color: var(--text-secondary);
}

.settings-read-value[b-sbbv79ggdc] {
    font-size: var(--size-300);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* 2d — TikTok disabled platform row (UI-05, D-11) */
.settings-platform-row[b-sbbv79ggdc] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-2);
    border: 1px solid var(--border);
}

.settings-platform-row.tiktok-disabled[b-sbbv79ggdc] {
    background: var(--surface-subtle);
    cursor: not-allowed;
    pointer-events: none;
}

.settings-platform-icon[b-sbbv79ggdc] {
    color: var(--text-muted);
    font-size: var(--size-400);
}

.settings-platform-label[b-sbbv79ggdc] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.settings-platform-name[b-sbbv79ggdc] {
    font-size: var(--size-300);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
}

.settings-platform-note[b-sbbv79ggdc] {
    display: block;
    font-size: var(--size-200);
    font-weight: var(--weight-regular);
    color: var(--text-muted);
    margin-top: 2px;
}

/* 2e — loading skeleton.
   Scoped CSS keyframes are per-component, so re-declare `pulse` locally even
   though SlotCard.razor.css also defines it. */
.settings-skeleton[b-sbbv79ggdc] {
    background: var(--surface-subtle);
    border-radius: var(--radius-2);
    height: 20px;
    animation: pulse-b-sbbv79ggdc 1.5s ease-in-out infinite;
}

@keyframes pulse-b-sbbv79ggdc {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
/* /Shared/Components/Marketing/CalendarHistoryAccordion.razor.rz.scp.css */
/* CalendarHistoryAccordion — Phase 208. No hex literals. */

.history-accordion details[b-1sc1uvudvy] {
    border-top: 1px solid var(--border);
}

.history-accordion details:last-child[b-1sc1uvudvy] {
    border-bottom: 1px solid var(--border);
}

.history-accordion summary[b-1sc1uvudvy] {
    list-style: none;
    cursor: pointer;
    padding: var(--space-3) 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--size-400);
    color: var(--text-body);
    gap: var(--space-2);
}

.history-accordion summary[b-1sc1uvudvy]::marker {
    display: none;
}

/* Remove default disclosure triangle in WebKit */
.history-accordion summary[b-1sc1uvudvy]::-webkit-details-marker {
    display: none;
}

.history-counts[b-1sc1uvudvy] {
    font-size: var(--size-300);
    color: var(--text-secondary);
    margin-left: var(--space-2);
    flex: 1;
}

.chevron[b-1sc1uvudvy] {
    transition: transform 0.2s ease;
    font-size: var(--size-300);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.history-accordion details[open] summary .chevron[b-1sc1uvudvy] {
    transform: rotate(180deg);
}

.history-slots[b-1sc1uvudvy] {
    padding-bottom: var(--space-3);
}

.history-slot-row[b-1sc1uvudvy] {
    padding: var(--space-2) 0;
    font-size: var(--size-400);
    color: var(--text-body);
    border-bottom: 1px solid var(--border);
}

.history-slot-row:last-child[b-1sc1uvudvy] {
    border-bottom: none;
}
/* /Shared/Components/Marketing/CalendarWeekGrid.razor.rz.scp.css */
/* CalendarWeekGrid — Phase 208. No hex literals. */

.calendar-week-section[b-l2xrabf6bd] {
    margin-bottom: var(--space-8);
}

.week-label[b-l2xrabf6bd] {
    font-size: var(--size-400);
    font-weight: var(--weight-medium);
    color: var(--text-body);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.calendar-week-grid[b-l2xrabf6bd] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-2);
}

.calendar-header-row[b-l2xrabf6bd] {
    margin-bottom: var(--space-1);
}

.calendar-day-header[b-l2xrabf6bd] {
    font-size: var(--size-200);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    text-align: center;
    padding: var(--space-1) 0;
}

.calendar-day-cell[b-l2xrabf6bd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 80px;
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
}

.empty-cell[b-l2xrabf6bd] {
    color: var(--text-muted);
    font-size: var(--size-300);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}
/* /Shared/Components/Marketing/PastPeriodsSection.razor.rz.scp.css */
/* PastPeriodsSection — Phase 210. No hex literals. */
/* All values via var(--token-name) from colors_and_type.css */

.past-periods-heading[b-y9sgfqsxmh] {
    font-size: var(--size-400);
    font-weight: var(--weight-medium);
    color: var(--text-body);
    margin-bottom: var(--space-2);
    margin-top: var(--space-6);
}

.past-periods-section details[b-y9sgfqsxmh] {
    border-top: 1px solid var(--border);
}

.past-periods-section details:last-child[b-y9sgfqsxmh] {
    border-bottom: 1px solid var(--border);
}

.past-periods-section summary[b-y9sgfqsxmh] {
    list-style: none;
    cursor: pointer;
    padding: var(--space-3) 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--size-400);
    color: var(--text-body);
}

.past-periods-section summary[b-y9sgfqsxmh]::marker { display: none; }
.past-periods-section summary[b-y9sgfqsxmh]::-webkit-details-marker { display: none; }

.past-periods-section details[open] summary .chevron[b-y9sgfqsxmh] {
    transform: rotate(180deg);
}

.slot-counts[b-y9sgfqsxmh] {
    font-size: var(--size-300);
    color: var(--text-secondary);
    margin-left: var(--space-2);
    flex: 1;
}

.past-period-slots[b-y9sgfqsxmh] {
    padding-bottom: var(--space-3);
}

.empty-state-past[b-y9sgfqsxmh] {
    padding: var(--space-8) 0;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--size-300);
}

.empty-heading[b-y9sgfqsxmh] {
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-1);
}
/* /Shared/Components/Marketing/SlotCard.razor.rz.scp.css */
/* SlotCard — Phase 208. No hex literals (RazorCssNoHexLiteralsTest gate). */
/* rgba() alpha-tints for slot-status-badge live in social-media.css (global), not here. */

.slot-card[b-cndp8xh23p] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-3);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.slot-header[b-cndp8xh23p] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--size-200);
    color: var(--text-secondary);
}

.slot-thumbnail[b-cndp8xh23p] {
    width: 100%;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-2);
}

.slot-image-skeleton[b-cndp8xh23p] {
    width: 100%;
    height: 56px;
    border-radius: var(--radius-2);
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    animation: pulse-b-cndp8xh23p 1.5s ease-in-out infinite;
}

@keyframes pulse-b-cndp8xh23p {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.slot-caption[b-cndp8xh23p] {
    font-size: var(--size-300);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0;
    color: var(--text-body);
}

.slot-caption-edit[b-cndp8xh23p] {
    width: 100%;
    font-size: var(--size-300);
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    background: var(--surface);
    color: var(--text-body);
    resize: vertical;
    font-family: inherit;
}

.slot-edit-area[b-cndp8xh23p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.slot-edit-actions[b-cndp8xh23p] {
    display: flex;
    gap: var(--space-2);
}

.slot-actions[b-cndp8xh23p] {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.slot-card:hover .slot-actions[b-cndp8xh23p] {
    opacity: 1;
}

/* Always visible on touch devices */
@media (hover: none) {
    .slot-actions[b-cndp8xh23p] {
        opacity: 1;
    }
}

.action-btn[b-cndp8xh23p] {
    min-height: 28px;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-2);
    font-size: var(--size-200);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.action-btn.approve[b-cndp8xh23p] {
    border: 1px solid var(--status-ok);
    color: var(--status-ok);
    background: transparent;
}

.action-btn.reject[b-cndp8xh23p] {
    border: 1px solid var(--status-warn);
    color: var(--status-warn);
    background: transparent;
}

.action-btn.ghost[b-cndp8xh23p] {
    border: none;
    color: var(--text-secondary);
    background: transparent;
}

.action-btn.approve:hover[b-cndp8xh23p] {
    background: var(--surface-subtle);
}

.action-btn.reject:hover[b-cndp8xh23p] {
    background: var(--surface-subtle);
}

.action-btn.ghost:hover[b-cndp8xh23p] {
    color: var(--text-body);
}

/* Phase 215 UI-04 — confidence score badge in slot header.
   Plain neutral pill (D-05); no color-coding by threshold.
   Literal 24px / 2px / 6px are intra-component sub-scale sizes per UI-SPEC §1. */
.slot-confidence-badge[b-cndp8xh23p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 2px 6px;
    margin-left: var(--space-1);
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: var(--size-300);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
/* /Shared/Components/Marketing/SlotRatingRow.razor.rz.scp.css */
/* SlotRatingRow — Phase 210. No hex literals. */
/* Depends on --rating-negative-soft token in colors_and_type.css */

.slot-rating-row[b-u7w11zhwbo] {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--size-400);
    color: var(--text-body);
}

.slot-rating-row:last-child[b-u7w11zhwbo] { border-bottom: none; }

.slot-meta[b-u7w11zhwbo] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.slot-date[b-u7w11zhwbo] {
    font-size: var(--size-300);
    color: var(--text-secondary);
    white-space: nowrap;
}

.slot-caption[b-u7w11zhwbo] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rating-actions[b-u7w11zhwbo] {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.rating-btn[b-u7w11zhwbo] {
    min-height: 44px;
    min-width: 44px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius-2);
    cursor: pointer;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    font-size: var(--size-400);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.rating-btn.active-up[b-u7w11zhwbo] {
    background: var(--accent-soft);
    border-color: var(--border-strong);
    color: var(--accent);
}

.rating-btn.active-down[b-u7w11zhwbo] {
    background: var(--rating-negative-soft);
    border-color: var(--border-strong);
    color: var(--status-err);
}

.comment-area[b-u7w11zhwbo] {
    margin-top: var(--space-2);
}

.rating-comment[b-u7w11zhwbo] {
    width: 100%;
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    font-size: var(--size-400);
    color: var(--text-body);
    background: var(--surface);
    resize: vertical;
}

.rating-save-btn[b-u7w11zhwbo] {
    margin-top: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
}

.rating-error[b-u7w11zhwbo] {
    color: var(--status-err);
    font-size: var(--size-300);
    margin-top: var(--space-1);
    display: block;
}
/* /Shared/Components/Marketing/SuggestionSidebar.razor.rz.scp.css */
/* SuggestionSidebar — Phase 208. No hex literals. */

.suggestion-sidebar[b-gz2of8lj30] {
    display: flex;
    flex-direction: column;
}

.sidebar-section[b-gz2of8lj30] {
    margin-bottom: var(--space-6);
}

.sidebar-heading[b-gz2of8lj30] {
    font-size: var(--size-400);
    font-weight: var(--weight-medium);
    color: var(--text-body);
    margin-bottom: var(--space-2);
    margin-top: 0;
}

.sidebar-item[b-gz2of8lj30] {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--size-400);
    color: var(--text-body);
}

.sidebar-item:last-child[b-gz2of8lj30] {
    border-bottom: none;
}

.sidebar-item-skipped[b-gz2of8lj30] {
    color: var(--text-muted);
}

.sidebar-empty[b-gz2of8lj30] {
    font-size: var(--size-300);
    color: var(--text-muted);
    margin: 0;
}

.provenance-link[b-gz2of8lj30] {
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
    font-size: var(--size-300);
    display: block;
    margin-top: var(--space-1);
}

.provenance-link:hover[b-gz2of8lj30] {
    color: var(--text-body);
}
/* /Shared/Components/Mukbang/AddToHomeScreenCard.razor.rz.scp.css */
.a2hs-card[b-iy0q2vgzp9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    border: 1px solid rgba(255, 107, 53, 0.3);
    margin: 0.75rem;
    text-align: center;
}

.a2hs-icon[b-iy0q2vgzp9] {
    font-size: 2.5rem;
    line-height: 1;
}

.a2hs-content[b-iy0q2vgzp9] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}

.a2hs-title[b-iy0q2vgzp9] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.a2hs-body[b-iy0q2vgzp9] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}

.a2hs-steps[b-iy0q2vgzp9] {
    text-align: left;
    padding-left: 1.25rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.a2hs-steps li[b-iy0q2vgzp9] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.4;
}

.a2hs-steps strong[b-iy0q2vgzp9] {
    color: #ffffff;
}

.a2hs-actions[b-iy0q2vgzp9] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    max-width: 260px;
}

.a2hs-btn-dismiss[b-iy0q2vgzp9] {
    width: 100%;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 107, 53, 0.5);
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.a2hs-btn-dismiss:hover[b-iy0q2vgzp9] {
    background: rgba(255, 107, 53, 0.15);
    color: #ffffff;
}

.a2hs-btn-dismiss:active[b-iy0q2vgzp9] {
    background: rgba(255, 107, 53, 0.25);
}
/* /Shared/Components/Mukbang/AuthGateModal.razor.rz.scp.css */
.auth-gate-overlay[b-mori8rzm2f] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-gate-card[b-mori8rzm2f] {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    max-width: 320px;
    width: calc(100% - 48px);
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.auth-gate-icon[b-mori8rzm2f] {
    font-size: 48px;
    margin-bottom: 12px;
    line-height: 1;
}

.auth-gate-message[b-mori8rzm2f] {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.5;
}

.auth-gate-login-btn[b-mori8rzm2f] {
    display: block;
    width: 100%;
    padding: 14px;
    background: #1976d2;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 8px;
    transition: background 0.2s;
}

.auth-gate-login-btn:hover[b-mori8rzm2f] {
    background: #1565c0;
}

.auth-gate-cancel-btn[b-mori8rzm2f] {
    display: block;
    width: 100%;
    padding: 12px;
    background: transparent;
    color: #666;
    border: none;
    font-size: 15px;
    cursor: pointer;
}

.auth-gate-cancel-btn:hover[b-mori8rzm2f] {
    color: #333;
}
/* /Shared/Components/Mukbang/BuffetCardLayout.razor.rz.scp.css */
.buffet-body[b-rr7l6ylp4k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.buffet-label[b-rr7l6ylp4k] {
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.buffet-price[b-rr7l6ylp4k] {
    font-size: 4rem;
    font-weight: 900;
    color: #00d4aa;
    line-height: 1;
    letter-spacing: -0.02em;
}
/* /Shared/Components/Mukbang/CategoryTag.razor.rz.scp.css */
.category-tag[b-jrv1g6vfl9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.category-tag.active[b-jrv1g6vfl9] {
    border-color: #00d4aa;
    color: #00d4aa;
    background: rgba(0, 212, 170, 0.1);
}

.category-tag:active[b-jrv1g6vfl9] {
    opacity: 0.75;
}

.tag-count[b-jrv1g6vfl9] {
    font-weight: 400;
    opacity: 0.6;
}
/* /Shared/Components/Mukbang/CircleCard.razor.rz.scp.css */
.circle-card[b-h5vzvx2cjb] {
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 0.75rem;
}

.circle-card:hover[b-h5vzvx2cjb] {
    background: #22224a;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.circle-card:active[b-h5vzvx2cjb] {
    transform: translateY(0);
}

.circle-card-header[b-h5vzvx2cjb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.circle-name[b-h5vzvx2cjb] {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.circle-badge[b-h5vzvx2cjb] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    white-space: nowrap;
}

.circle-badge-public[b-h5vzvx2cjb] {
    background: rgba(0, 212, 170, 0.15);
    color: #00d4aa;
    border: 1px solid rgba(0, 212, 170, 0.3);
}

.circle-badge-private[b-h5vzvx2cjb] {
    background: rgba(255, 255, 255, 0.07);
    color: #aaa;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.circle-card-meta[b-h5vzvx2cjb] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.circle-cadence[b-h5vzvx2cjb] {
    font-size: 0.8rem;
    color: #aaa;
}

.circle-members[b-h5vzvx2cjb] {
    font-size: 0.8rem;
    color: #888;
}
/* /Shared/Components/Mukbang/ClaimButton.razor.rz.scp.css */
:root[b-s4oamv3j66] {
    --claim-bg: #1c1c1e;
    --claim-border: #3a3a3c;
    --claim-text: #f2f2f7;
    --claim-muted: #8e8e93;
    --claim-accent: #f5a623;
    --claim-success: #30d158;
    --claim-danger: #ff453a;
    --claim-input-bg: #2c2c2e;
}

.claim-section[b-s4oamv3j66] {
    background-color: var(--claim-bg);
    border: 1px solid var(--claim-border);
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 2rem;
}

.claim-header[b-s4oamv3j66] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.claim-icon[b-s4oamv3j66] {
    font-size: 1.75rem;
    flex-shrink: 0;
}

.claim-intro[b-s4oamv3j66] {
    flex: 1;
}

.claim-title[b-s4oamv3j66] {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--claim-text);
}

.claim-subtitle[b-s4oamv3j66] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--claim-muted);
}

.claim-cta-button[b-s4oamv3j66] {
    flex-shrink: 0;
    background-color: var(--claim-accent);
    color: #1a1a1a;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease;
    white-space: nowrap;
}

.claim-cta-button:hover[b-s4oamv3j66] {
    opacity: 0.85;
}

/* Success state */
.claim-success[b-s4oamv3j66] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background-color: rgba(48, 209, 88, 0.12);
    border: 1px solid rgba(48, 209, 88, 0.3);
    border-radius: 6px;
    color: var(--claim-success);
    font-size: 0.9rem;
}

.success-icon[b-s4oamv3j66] {
    font-weight: 700;
    font-size: 1.1rem;
}

/* Error banner */
.claim-error[b-s4oamv3j66] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background-color: rgba(255, 69, 58, 0.12);
    border: 1px solid rgba(255, 69, 58, 0.3);
    border-radius: 6px;
    color: var(--claim-danger);
    font-size: 0.875rem;
}

.error-dismiss[b-s4oamv3j66] {
    background: none;
    border: none;
    color: var(--claim-danger);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0;
    line-height: 1;
}

/* Form */
.claim-form[b-s4oamv3j66] {
    margin-top: 1.25rem;
}

.form-row[b-s4oamv3j66] {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.form-label[b-s4oamv3j66] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--claim-muted);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.required[b-s4oamv3j66] {
    color: var(--claim-danger);
}

.form-input[b-s4oamv3j66],
.form-textarea[b-s4oamv3j66] {
    background-color: var(--claim-input-bg);
    border: 1px solid var(--claim-border);
    border-radius: 6px;
    color: var(--claim-text);
    font-size: 0.9rem;
    padding: 0.6rem 0.75rem;
    outline: none;
    transition: border-color 0.15s ease;
    font-family: inherit;
}

.form-input:focus[b-s4oamv3j66],
.form-textarea:focus[b-s4oamv3j66] {
    border-color: var(--claim-accent);
}

.form-textarea[b-s4oamv3j66] {
    resize: vertical;
    min-height: 80px;
}

.input-error[b-s4oamv3j66] {
    border-color: var(--claim-danger) !important;
}

.field-error[b-s4oamv3j66] {
    font-size: 0.8rem;
    color: var(--claim-danger);
    margin-top: 0.25rem;
}

/* Form actions */
.form-actions[b-s4oamv3j66] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.cancel-button[b-s4oamv3j66] {
    background: none;
    border: 1px solid var(--claim-border);
    border-radius: 6px;
    color: var(--claim-muted);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.cancel-button:hover:not(:disabled)[b-s4oamv3j66] {
    border-color: var(--claim-text);
    color: var(--claim-text);
}

.submit-button[b-s4oamv3j66] {
    background-color: var(--claim-accent);
    border: none;
    border-radius: 6px;
    color: #1a1a1a;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    transition: opacity 0.15s ease;
}

.submit-button:hover:not(:disabled)[b-s4oamv3j66] {
    opacity: 0.85;
}

.submit-button:disabled[b-s4oamv3j66],
.cancel-button:disabled[b-s4oamv3j66] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Shared/Components/Mukbang/DagensLunchBanner.razor.rz.scp.css */
.dagens-lunch-banner[b-j775rmbaui] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #f5a623;
    color: #1a1a1a;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.banner-icon[b-j775rmbaui] {
    font-size: 1rem;
    flex-shrink: 0;
}

.banner-text[b-j775rmbaui] {
    flex: 1;
}

.banner-relative[b-j775rmbaui] {
    margin-left: 0.25rem;
    opacity: 0.75;
    font-style: italic;
}
/* /Shared/Components/Mukbang/FeedFilterBar.razor.rz.scp.css */
.filter-bar[b-v9n31g48f7] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hairline);
    padding: 12px;
}

.bar-row-1[b-v9n31g48f7] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.bar-row-1 h1[b-v9n31g48f7] {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
}

.bar-row-1 .day[b-v9n31g48f7] {
    font-size: 12px;
    color: var(--ink-2);
    text-transform: lowercase;
}

.bar-row-2[b-v9n31g48f7] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.bar-row-2[b-v9n31g48f7]::-webkit-scrollbar { display: none; }

.pill[b-v9n31g48f7] {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid var(--hairline);
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.pill.on[b-v9n31g48f7] {
    background: var(--ink);
    color: var(--surface);
    border-color: var(--ink);
}

.pill.budget[b-v9n31g48f7] {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: transparent;
}
/* /Shared/Components/Mukbang/FeedRestaurantCard.razor.rz.scp.css */
.grid-card[b-7ky5legb0b] {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--surface);                          /* fallback: browsers without gradient support */
    background-image: linear-gradient(                         /* null-photo warm fallback — per D-01 */
        to bottom right,
        var(--accent-soft),
        var(--surface)
    );
    background-size: cover;
    background-position: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}

.grid-card.featured[b-7ky5legb0b] {
    /* Outer aspect/radius/shadow set by parent .feed-card.featured wrapper */
}

.scrim[b-7ky5legb0b] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(0,0,0,0.62) 0%,
        rgba(0,0,0,0.05) 50%,
        rgba(0,0,0,0) 100%);
    pointer-events: none;
}

.deal[b-7ky5legb0b] {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--accent);
    color: var(--surface);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    padding: 3px 8px;
    border-radius: var(--radius-1);
    z-index: 2;
}

.info[b-7ky5legb0b] {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.grid-card .name[b-7ky5legb0b] {
    color: var(--surface);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid-card.featured .name[b-7ky5legb0b] {
    font-size: 22px;
    letter-spacing: -0.02em;
}

.grid-card .meta[b-7ky5legb0b] {
    color: var(--surface);
    opacity: 0.92;
    font-size: 12px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.price-chip[b-7ky5legb0b] {
    align-self: flex-start;
    background: rgba(255,255,255,0.95);
    color: var(--ink);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    border-radius: var(--radius-1);
    padding: 2px 6px;
    margin-top: 2px;
}

.price-chip.price-unknown[b-7ky5legb0b] {
    color: var(--ink-2);
}

.heart[b-7ky5legb0b] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: var(--accent);
    pointer-events: none;
    z-index: 5;
    animation: feedRestHeartPulse-b-7ky5legb0b 0.6s ease-out forwards;
}

@keyframes feedRestHeartPulse-b-7ky5legb0b {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    30%  { transform: translate(-50%, -50%) scale(1.0); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}
/* /Shared/Components/Mukbang/LargeMenuCardLayout.razor.rz.scp.css */
.large-menu-body[b-e9bqviobke] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}

.price-range[b-e9bqviobke] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #00d4aa;
}

.category-tags[b-e9bqviobke] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.picked-dishes[b-e9bqviobke] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.picked-dish[b-e9bqviobke] {
    display: flex;
    flex-direction: column;
}

.picked-dish-name[b-e9bqviobke] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
}

.picked-dish-desc[b-e9bqviobke] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.picked-dish-price[b-e9bqviobke] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #00d4aa;
}

.menu-hint[b-e9bqviobke] {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 0.5rem;
    margin-bottom: 0;
}
/* /Shared/Components/Mukbang/LunchMenuCardLayout.razor.rz.scp.css */
.lunch-body[b-1l56r0iiss] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}

.lunch-price[b-1l56r0iiss] {
    font-size: 2rem;
    font-weight: 800;
    color: #00d4aa;
    letter-spacing: -0.01em;
    line-height: 1;
    margin-bottom: 1rem;
}

.lunch-dishes[b-1l56r0iiss] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lunch-dish[b-1l56r0iiss] {
    display: flex;
    flex-direction: column;
}

.lunch-dish-name[b-1l56r0iiss] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.lunch-dish-desc[b-1l56r0iiss] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.2rem;
    line-height: 1.3;
}
/* /Shared/Components/Mukbang/MukbangNavbar.razor.rz.scp.css */
.mukbang-navbar[b-qpcg8tfl3o] {
    background-color: #0f0f1a;
    border-bottom: 1px solid #1e1e3a;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    padding: 0.75rem 1.25rem;
}

.navbar-inner[b-qpcg8tfl3o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 1rem;
}

/* Brand */
.brand-section[b-qpcg8tfl3o] {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
}

.brand-text[b-qpcg8tfl3o] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    transition: color 0.2s ease;
}

.brand-section:hover .brand-text[b-qpcg8tfl3o] {
    color: #a5f3fc;
}

.brand-tagline[b-qpcg8tfl3o] {
    font-size: 0.72rem;
    color: #94a3b8;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 0.15rem;
    line-height: 1;
}

/* Search */
.search-section[b-qpcg8tfl3o] {
    flex: 1;
    max-width: 480px;
}

.search-wrapper[b-qpcg8tfl3o] {
    position: relative;
    width: 100%;
}

.search-input[b-qpcg8tfl3o] {
    width: 100%;
    padding: 0.55rem 2.5rem 0.55rem 1rem;
    background-color: #1a1a2e;
    color: #e2e8f0;
    border: 1px solid #2a2a4a;
    border-radius: 999px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.search-input[b-qpcg8tfl3o]::placeholder {
    color: #64748b;
}

.search-input:focus[b-qpcg8tfl3o] {
    border-color: #4a4a7a;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

/* Magnifying glass icon via pseudo-element on wrapper */
.search-icon[b-qpcg8tfl3o] {
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.search-icon[b-qpcg8tfl3o]::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border: 2px solid #64748b;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}

.search-icon[b-qpcg8tfl3o]::after {
    content: '';
    display: block;
    width: 5px;
    height: 2px;
    background-color: #64748b;
    position: absolute;
    bottom: 1px;
    right: 0;
    transform: rotate(-45deg);
    transform-origin: right center;
}

/* Mobile: stack brand above search */
@media (max-width: 600px) {
    .navbar-inner[b-qpcg8tfl3o] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }

    .search-section[b-qpcg8tfl3o] {
        width: 100%;
        max-width: 100%;
    }
}
/* /Shared/Components/Mukbang/NotificationOptInCard.razor.rz.scp.css */
.notification-optin-card[b-2i6p4fklmy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    border: 1px solid rgba(255, 107, 53, 0.3);
    margin: 0.75rem;
    text-align: center;
}

.optin-icon[b-2i6p4fklmy] {
    font-size: 2.5rem;
    line-height: 1;
}

.optin-content[b-2i6p4fklmy] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.optin-title[b-2i6p4fklmy] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.optin-body[b-2i6p4fklmy] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    line-height: 1.4;
}

.optin-actions[b-2i6p4fklmy] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    max-width: 260px;
}

.optin-btn-enable[b-2i6p4fklmy] {
    width: 100%;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    border: none;
    background: #FF6B35;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.optin-btn-enable:hover[b-2i6p4fklmy] {
    background: #e5602f;
}

.optin-btn-enable:active[b-2i6p4fklmy] {
    background: #cc5629;
}

.optin-btn-dismiss[b-2i6p4fklmy] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0.25rem;
    text-decoration: underline;
    -webkit-tap-highlight-color: transparent;
}

.optin-btn-dismiss:hover[b-2i6p4fklmy] {
    color: rgba(255, 255, 255, 0.6);
}
/* /Shared/Components/Mukbang/OwnerLunchPostTab.razor.rz.scp.css */
/* OwnerLunchPostTab — Free text lunch posting with AI parse preview */

.lunch-post-tab[b-io14phlex2] {
    padding-top: 8px;
}

/* ── Banners ── */

.banner[b-io14phlex2] {
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
}

.banner-success[b-io14phlex2] {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
}

.banner-error[b-io14phlex2] {
    background: #fff1f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

/* ── Day tabs ── */

.day-tabs[b-io14phlex2] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
    padding-bottom: 4px;
}

.day-btn[b-io14phlex2] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 14px;
    min-width: 64px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}

.day-btn.active[b-io14phlex2] {
    border-color: #14b8a6;
    background: #f0fdf9;
}

.day-btn.has-content[b-io14phlex2] {
    border-color: #0d9488;
}

.day-name[b-io14phlex2] {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.day-btn.active .day-name[b-io14phlex2] {
    color: #0d9488;
}

.day-date[b-io14phlex2] {
    font-size: 11px;
    color: #94a3b8;
}

.day-dot[b-io14phlex2] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    background: #14b8a6;
    border-radius: 50%;
}

/* ── Text input ── */

.input-section[b-io14phlex2] {
    margin-bottom: 20px;
}

.input-label[b-io14phlex2] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.lunch-textarea[b-io14phlex2] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    font-size: 14px;
    line-height: 1.6;
    color: #111;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
    margin-bottom: 12px;
}

.lunch-textarea:focus[b-io14phlex2] {
    outline: none;
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

.copy-yesterday-btn[b-io14phlex2] {
    background: none;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    margin-bottom: 8px;
}

.copy-yesterday-btn:hover[b-io14phlex2] {
    border-color: #14b8a6;
    color: #14b8a6;
}

.copy-yesterday-btn:disabled[b-io14phlex2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-parse[b-io14phlex2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #14b8a6;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-parse:hover:not(:disabled)[b-io14phlex2] {
    background: #0d9488;
}

.btn-parse:disabled[b-io14phlex2] {
    background: #94a3b8;
    cursor: not-allowed;
}

/* ── Parsed dishes ── */

.parsed-section[b-io14phlex2] {
    margin-bottom: 24px;
}

.parsed-title[b-io14phlex2] {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    margin: 0 0 4px;
}

.parsed-sub[b-io14phlex2] {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 14px;
}

.dish-card[b-io14phlex2] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
    position: relative;
}

.dish-row[b-io14phlex2] {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.dish-row:last-child[b-io14phlex2] {
    margin-bottom: 0;
}

.dish-field[b-io14phlex2] {
    flex: 1;
    min-width: 120px;
}

.dish-field-narrow[b-io14phlex2] {
    flex: 0 0 100px;
}

.dish-label[b-io14phlex2] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.dish-input[b-io14phlex2] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 14px;
    color: #111;
    box-sizing: border-box;
    font-family: inherit;
}

.dish-input:focus[b-io14phlex2] {
    outline: none;
    border-color: #14b8a6;
}

.dish-category[b-io14phlex2] {
    display: inline-block;
    background: #f1f5f9;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    color: #374151;
}

.btn-remove-dish[b-io14phlex2] {
    margin-top: 8px;
    background: transparent;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    color: #dc2626;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-remove-dish:hover[b-io14phlex2] {
    background: #fff1f2;
}

.parsed-empty[b-io14phlex2] {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    padding: 16px;
    font-size: 13px;
    color: #64748b;
    margin-bottom: 20px;
}

/* ── Publish ── */

.publish-section[b-io14phlex2] {
    border-top: 1px solid #e2e8f0;
    padding-top: 20px;
    margin-top: 8px;
}

.btn-publish[b-io14phlex2] {
    width: 100%;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
    margin-bottom: 8px;
}

.btn-publish:hover:not(:disabled)[b-io14phlex2] {
    opacity: 0.9;
}

.btn-publish:disabled[b-io14phlex2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.publish-hint[b-io14phlex2] {
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
    margin: 0;
}
/* /Shared/Components/Mukbang/OwnerMenuTab.razor.rz.scp.css */
/* OwnerMenuTab — Menu item list with source labels, inline editing, and photo upload */

.menu-tab[b-tsth89d5lj] {
    padding-top: 8px;
}

/* ── Banners ── */

.banner[b-tsth89d5lj] {
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
}

.banner-success[b-tsth89d5lj] {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
}

.banner-error[b-tsth89d5lj] {
    background: #fff1f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

/* ── States ── */

.loading-state[b-tsth89d5lj],
.empty-state[b-tsth89d5lj] {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}

.item-count[b-tsth89d5lj] {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 12px;
}

/* ── Menu item card ── */

.menu-item-card[b-tsth89d5lj] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
    transition: border-color 0.15s;
}

.menu-item-card.editing[b-tsth89d5lj] {
    border-color: #14b8a6;
}

/* ── View mode ── */

.item-header[b-tsth89d5lj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.item-info[b-tsth89d5lj] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.item-thumb[b-tsth89d5lj] {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.item-details[b-tsth89d5lj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-name[b-tsth89d5lj] {
    font-size: 15px;
    font-weight: 700;
    color: #111;
}

.item-price[b-tsth89d5lj] {
    font-size: 14px;
    font-weight: 600;
    color: #0d9488;
}

.item-date[b-tsth89d5lj] {
    font-size: 12px;
    color: #94a3b8;
}

.item-badges[b-tsth89d5lj] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* ── Badges ── */

.badge[b-tsth89d5lj] {
    display: inline-block;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-owner[b-tsth89d5lj] {
    background: #f0fdf9;
    color: #0d9488;
    border: 1px solid #99f6e4;
}

.badge-scraped[b-tsth89d5lj] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.badge-category[b-tsth89d5lj] {
    background: #fef9ee;
    color: #92400e;
    border: 1px solid #fde68a;
}

/* ── Allergen tags ── */

.allergen-tags[b-tsth89d5lj] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.allergen-tag[b-tsth89d5lj] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    color: #166534;
}

/* ── Item actions ── */

.item-actions[b-tsth89d5lj] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-edit[b-tsth89d5lj] {
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-edit:hover[b-tsth89d5lj] {
    background: #f8fafc;
}

.btn-delete[b-tsth89d5lj] {
    background: transparent;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    color: #dc2626;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-delete:hover[b-tsth89d5lj] {
    background: #fff1f2;
}

.delete-confirm[b-tsth89d5lj] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.delete-confirm-text[b-tsth89d5lj] {
    font-size: 13px;
    color: #dc2626;
    font-weight: 600;
}

.btn-delete-confirm[b-tsth89d5lj] {
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-cancel-delete[b-tsth89d5lj] {
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
}

/* ── Edit mode ── */

.edit-form[b-tsth89d5lj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-row[b-tsth89d5lj] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.form-field[b-tsth89d5lj] {
    flex: 1;
    min-width: 120px;
}

.form-field-narrow[b-tsth89d5lj] {
    flex: 0 0 100px;
}

.form-label[b-tsth89d5lj] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.form-input[b-tsth89d5lj] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 14px;
    color: #111;
    box-sizing: border-box;
    font-family: inherit;
}

.form-input:focus[b-tsth89d5lj] {
    outline: none;
    border-color: #14b8a6;
}

.edit-photo-preview[b-tsth89d5lj] {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    margin-bottom: 8px;
}

.photo-input[b-tsth89d5lj] {
    display: block;
    font-size: 13px;
    color: #374151;
}

.upload-hint[b-tsth89d5lj] {
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
}

.edit-actions[b-tsth89d5lj] {
    display: flex;
    gap: 8px;
}

.btn-save[b-tsth89d5lj] {
    background: #14b8a6;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-save:hover:not(:disabled)[b-tsth89d5lj] {
    background: #0d9488;
}

.btn-save:disabled[b-tsth89d5lj] {
    background: #94a3b8;
    cursor: not-allowed;
}

.btn-cancel[b-tsth89d5lj] {
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 14px;
    color: #64748b;
    cursor: pointer;
}
/* /Shared/Components/Mukbang/OwnerProfileTab.razor.rz.scp.css */
/* OwnerProfileTab — Profile management: description, cuisine, cover photo, opening hours */

.profile-tab[b-rqpb8dn3zn] {
    padding-top: 8px;
}

/* ── Banners ── */

.banner[b-rqpb8dn3zn] {
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
}

.banner-success[b-rqpb8dn3zn] {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
}

.banner-error[b-rqpb8dn3zn] {
    background: #fff1f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

/* ── Loading state ── */

.loading-state[b-rqpb8dn3zn] {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}

/* ── Sections ── */

.profile-section[b-rqpb8dn3zn] {
    margin-bottom: 28px;
}

.section-title[b-rqpb8dn3zn] {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    margin: 0 0 6px;
}

.section-hint[b-rqpb8dn3zn] {
    font-size: 12px;
    color: #64748b;
    margin: 0 0 10px;
}

/* ── Restaurant name display ── */

.restaurant-name-display[b-rqpb8dn3zn] {
    font-size: 20px;
    font-weight: 800;
    color: #0f766e;
}

/* ── Text inputs ── */

.profile-textarea[b-rqpb8dn3zn] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    font-size: 14px;
    line-height: 1.6;
    color: #111;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
    margin-bottom: 4px;
}

.profile-textarea:focus[b-rqpb8dn3zn] {
    outline: none;
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

.char-counter[b-rqpb8dn3zn] {
    font-size: 12px;
    color: #94a3b8;
    text-align: right;
}

.char-counter-warn[b-rqpb8dn3zn] {
    color: #d97706;
    font-weight: 600;
}

.profile-input[b-rqpb8dn3zn] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    color: #111;
    box-sizing: border-box;
    font-family: inherit;
}

.profile-input:focus[b-rqpb8dn3zn] {
    outline: none;
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

/* ── Cover photo ── */

.cover-photo-preview[b-rqpb8dn3zn] {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    margin-bottom: 10px;
}

.photo-input[b-rqpb8dn3zn] {
    display: block;
    font-size: 13px;
    color: #374151;
    margin-bottom: 4px;
}

.upload-hint[b-rqpb8dn3zn] {
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
}

/* ── Opening hours ── */

.hours-day[b-rqpb8dn3zn] {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
}

.hours-day-header[b-rqpb8dn3zn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.hours-day-name[b-rqpb8dn3zn] {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.closed-toggle[b-rqpb8dn3zn] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
}

.closed-toggle input[type="checkbox"][b-rqpb8dn3zn] {
    width: 16px;
    height: 16px;
    accent-color: #14b8a6;
}

.hours-slot[b-rqpb8dn3zn] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.time-input[b-rqpb8dn3zn] {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 14px;
    color: #111;
    font-family: inherit;
    width: 110px;
}

.time-input:focus[b-rqpb8dn3zn] {
    outline: none;
    border-color: #14b8a6;
}

.time-sep[b-rqpb8dn3zn] {
    font-size: 16px;
    color: #64748b;
    font-weight: 600;
}

.btn-remove-slot[b-rqpb8dn3zn] {
    background: transparent;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    color: #dc2626;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-remove-slot:hover[b-rqpb8dn3zn] {
    background: #fff1f2;
}

.btn-add-slot[b-rqpb8dn3zn] {
    background: transparent;
    border: 1px dashed #94a3b8;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    width: 100%;
}

.btn-add-slot:hover[b-rqpb8dn3zn] {
    background: #f8fafc;
    border-color: #14b8a6;
    color: #0d9488;
}

/* ── Save button ── */

.save-section[b-rqpb8dn3zn] {
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
    margin-top: 16px;
}

.btn-save-profile[b-rqpb8dn3zn] {
    width: 100%;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}

.btn-save-profile:hover:not(:disabled)[b-rqpb8dn3zn] {
    opacity: 0.9;
}

.btn-save-profile:disabled[b-rqpb8dn3zn] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Shared/Components/Mukbang/PWAInstallCard.razor.rz.scp.css */
/* PWAInstallCard.razor.css — MUKBANG PWA install prompt card */

.pwa-install-card[b-4m45b22aov] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    background: #1c1c1e;
    border: 1px solid #3a3a3c;
    border-radius: 12px;
    padding: 1.25rem;
    margin: 0.75rem 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.install-card-icon[b-4m45b22aov] {
    font-size: 2rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 0.125rem;
}

.install-card-body[b-4m45b22aov] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.install-card-title[b-4m45b22aov] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #f2f2f7;
    letter-spacing: -0.01em;
}

.install-card-desc[b-4m45b22aov] {
    margin: 0;
    font-size: 0.875rem;
    color: #8e8e93;
    line-height: 1.4;
}

/* iOS-specific instructional block */
.install-ios-instructions[b-4m45b22aov] {
    background: rgba(255, 107, 53, 0.08);
    border: 1px solid rgba(255, 107, 53, 0.25);
    border-radius: 8px;
    padding: 0.625rem 0.75rem;
    margin-top: 0.25rem;
}

.ios-step[b-4m45b22aov] {
    margin: 0 0 0.25rem 0;
    font-size: 0.8rem;
    color: #aeaeb2;
}

.ios-share-icon[b-4m45b22aov] {
    color: #007aff;
    font-style: normal;
}

.ios-action[b-4m45b22aov] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f2f2f7;
}

/* Install button — MUKBANG orange, full-width on mobile */
.install-btn[b-4m45b22aov] {
    width: 100%;
    background: #FF6B35;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.625rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease;
    margin-top: 0.25rem;
}

.install-btn:hover[b-4m45b22aov] {
    opacity: 0.9;
}

.install-btn:active[b-4m45b22aov] {
    transform: scale(0.98);
    opacity: 0.85;
}

/* Dismiss link — subtle, smaller */
.install-dismiss[b-4m45b22aov] {
    background: none;
    border: none;
    color: #636366;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.25rem 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    align-self: flex-start;
    transition: color 0.15s ease;
}

.install-dismiss:hover[b-4m45b22aov] {
    color: #8e8e93;
}

/* Desktop: constrain width, center horizontally */
@media (min-width: 768px) {
    .pwa-install-card[b-4m45b22aov] {
        max-width: 420px;
        margin: 0.75rem auto;
    }

    .install-btn[b-4m45b22aov] {
        width: auto;
        padding: 0.625rem 1.75rem;
    }
}
/* /Shared/Components/Mukbang/RestaurantCard.razor.rz.scp.css */
.restaurant-card[b-gpcxzom57z] {
    background-color: #1a1a2e;
    border: 1px solid #2a2a4a;
    border-radius: 12px;
    padding: 1.25rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.restaurant-card:hover[b-gpcxzom57z] {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border-color: #4a4a7a;
}

.restaurant-card.no-lunch[b-gpcxzom57z] {
    opacity: 0.75;
}

/* Header */
.card-header[b-gpcxzom57z] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.restaurant-name[b-gpcxzom57z] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

/* Cuisine badges */
.cuisine-badge[b-gpcxzom57z] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    flex-shrink: 0;
}

.cuisine-sushi[b-gpcxzom57z] {
    background-color: #7f1d1d;
    color: #fca5a5;
}

.cuisine-thai[b-gpcxzom57z] {
    background-color: #14532d;
    color: #86efac;
}

.cuisine-pizza[b-gpcxzom57z] {
    background-color: #7c2d12;
    color: #fdba74;
}

.cuisine-lunch[b-gpcxzom57z] {
    background-color: #1e3a5f;
    color: #93c5fd;
}

.cuisine-chinese[b-gpcxzom57z] {
    background-color: #78350f;
    color: #fcd34d;
}

.cuisine-indian[b-gpcxzom57z] {
    background-color: #4a1d96;
    color: #c4b5fd;
}

.cuisine-burger[b-gpcxzom57z] {
    background-color: #1c1917;
    color: #d6d3d1;
}

.cuisine-default[b-gpcxzom57z] {
    background-color: #2d2d4a;
    color: #a5b4fc;
}

/* Body */
.card-body[b-gpcxzom57z] {
    flex: 1;
}

.lunch-summary[b-gpcxzom57z] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.lunch-text[b-gpcxzom57z] {
    margin: 0;
    font-size: 0.95rem;
    color: #e2e8f0;
    line-height: 1.5;
    font-weight: 500;
}

.price-row[b-gpcxzom57z] {
    display: flex;
    align-items: center;
}

.lunch-price[b-gpcxzom57z] {
    font-size: 1rem;
    font-weight: 700;
    color: #a5f3fc;
}

.price-tier[b-gpcxzom57z] {
    font-size: 0.85rem;
    color: #7dd3fc;
    font-style: italic;
}

/* No lunch state */
.no-lunch-indicator[b-gpcxzom57z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748b;
}

.calendar-x-icon[b-gpcxzom57z] {
    display: inline-block;
    width: 18px;
    height: 18px;
    position: relative;
    flex-shrink: 0;
}

.calendar-x-icon[b-gpcxzom57z]::before {
    content: '';
    display: block;
    width: 14px;
    height: 13px;
    border: 2px solid #64748b;
    border-radius: 2px;
    position: absolute;
    top: 3px;
    left: 2px;
}

.calendar-x-icon[b-gpcxzom57z]::after {
    content: '\00D7';
    display: block;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    position: absolute;
    top: 4px;
    left: 5px;
    line-height: 1;
}

.no-lunch-text[b-gpcxzom57z] {
    font-size: 0.88rem;
    color: #64748b;
    font-style: italic;
}

/* Footer */
.card-footer[b-gpcxzom57z] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border-top: 1px solid #2a2a4a;
    padding-top: 0.6rem;
}

.address[b-gpcxzom57z] {
    font-size: 0.8rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.opening-hours[b-gpcxzom57z] {
    font-size: 0.8rem;
    color: #7dd3fc;
    font-weight: 500;
}
/* /Shared/Components/Mukbang/RestaurantOwnerDashboard.razor.rz.scp.css */
/* RestaurantOwnerDashboard — Owner-facing B2B signal dashboard */

.owner-dashboard[b-u5ji05clc7] {
    margin: 24px 0;
    padding: 0;
}

/* ── Tab navigation ── */

.owner-tabs[b-u5ji05clc7] {
    display: flex;
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
    padding-bottom: 2px;
    border-bottom: 1px solid #e2e8f0;
}

.tab-btn[b-u5ji05clc7] {
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    padding: 10px 16px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.tab-btn:hover[b-u5ji05clc7] {
    color: #14b8a6;
}

.tab-btn.active[b-u5ji05clc7] {
    color: #14b8a6;
    border-bottom-color: #14b8a6;
}

.dashboard-title[b-u5ji05clc7] {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin: 0 0 4px;
}

.dashboard-subtitle[b-u5ji05clc7] {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 20px;
}

/* ── Metric grid ── */

.metric-grid[b-u5ji05clc7] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

@media (min-width: 768px) {
    .metric-grid[b-u5ji05clc7] {
        grid-template-columns: 1fr 1fr;
    }
}

.metric-card[b-u5ji05clc7] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.metric-value[b-u5ji05clc7] {
    font-size: 32px;
    font-weight: 800;
    color: #14b8a6;
    line-height: 1;
    margin-bottom: 4px;
}

.metric-label[b-u5ji05clc7] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 2px;
}

.metric-sub[b-u5ji05clc7] {
    font-size: 12px;
    color: #94a3b8;
}

/* ── Sparkline card ── */

.sparkline-card[b-u5ji05clc7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sparkline-container[b-u5ji05clc7] {
    height: 60px;
    display: flex;
    align-items: center;
}

.no-trend[b-u5ji05clc7] {
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
}

/* ── Rank card ── */

.rank-card[b-u5ji05clc7] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.metric-rank[b-u5ji05clc7] {
    font-size: 40px;
    font-weight: 900;
    color: #0f766e;
    line-height: 1;
    margin-bottom: 4px;
}

/* ── No data state ── */

.no-data-card[b-u5ji05clc7] {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    color: #64748b;
    margin-bottom: 24px;
}

.no-data-sub[b-u5ji05clc7] {
    font-size: 13px;
    color: #94a3b8;
    margin: 4px 0 0;
}

/* ── Preview section ── */

.preview-section[b-u5ji05clc7] {
    margin-bottom: 24px;
}

.preview-title[b-u5ji05clc7] {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 10px;
}

.preview-card[b-u5ji05clc7] {
    background: #f0fdf9;
    border: 1px solid #99f6e4;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.preview-name[b-u5ji05clc7] {
    font-size: 16px;
    font-weight: 700;
    color: #0f766e;
}

.preview-cuisine[b-u5ji05clc7] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #14b8a6;
    color: #fff;
    border-radius: 20px;
    padding: 3px 10px;
}

.preview-meta[b-u5ji05clc7] {
    font-size: 12px;
    color: #64748b;
    margin-left: auto;
}

/* ── Upgrade CTA ── */

.upgrade-cta[b-u5ji05clc7] {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    border-radius: 16px;
    padding: 24px;
    color: #fff;
}

.cta-title[b-u5ji05clc7] {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
}

.cta-body[b-u5ji05clc7] {
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 16px;
    line-height: 1.5;
}

.cta-button[b-u5ji05clc7] {
    display: inline-block;
    background: #fff;
    color: #0d9488;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 24px;
    border-radius: 8px;
    text-decoration: none;
    transition: opacity 0.15s;
}

.cta-button:hover[b-u5ji05clc7] {
    opacity: 0.9;
}
/* /Shared/Components/Mukbang/RoundCard.razor.rz.scp.css */
/* Round Card — morphing component for RSVP/Voting/Confirmed/Completed/Cancelled states */

.round-card[b-w0ylea4dic] {
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    max-width: 480px;
    width: 100%;
}

/* ── Header ──────────────────────────────────────────────────── */

.round-card-header[b-w0ylea4dic] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.75rem;
}

.round-card-header--confirmed[b-w0ylea4dic] {
    align-items: center;
    text-align: center;
}

.round-card-title[b-w0ylea4dic] {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
}

.round-card-title--confirmed[b-w0ylea4dic] {
    font-size: 1.15rem;
    color: #00d4aa;
}

.round-deadline-badge[b-w0ylea4dic] {
    font-size: 0.72rem;
    color: #888;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.3rem;
    padding: 0.15rem 0.45rem;
    align-self: flex-start;
}

/* ── RSVP Buttons ─────────────────────────────────────────────── */

.rsvp-buttons[b-w0ylea4dic] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.rsvp-btn[b-w0ylea4dic] {
    flex: 1;
    min-width: 110px;
    padding: 0.55rem 0.75rem;
    border-radius: 2rem;
    border: 2px solid transparent;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.rsvp-btn--yes[b-w0ylea4dic] {
    background: rgba(0, 212, 170, 0.12);
    color: #00d4aa;
    border-color: rgba(0, 212, 170, 0.3);
}

.rsvp-btn--yes.rsvp-btn--selected[b-w0ylea4dic] {
    background: rgba(0, 212, 170, 0.25);
    border-color: #00d4aa;
}

.rsvp-btn--no[b-w0ylea4dic] {
    background: rgba(255, 255, 255, 0.06);
    color: #999;
    border-color: rgba(255, 255, 255, 0.12);
}

.rsvp-btn--no.rsvp-btn--selected[b-w0ylea4dic] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.4);
}

.rsvp-btn--maybe[b-w0ylea4dic] {
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
    border-color: rgba(245, 158, 11, 0.25);
}

.rsvp-btn--maybe.rsvp-btn--selected[b-w0ylea4dic] {
    background: rgba(245, 158, 11, 0.22);
    border-color: #F59E0B;
}

.rsvp-btn:hover[b-w0ylea4dic] {
    opacity: 0.85;
}

/* ── Time Slot Picker ─────────────────────────────────────────── */

.timeslot-section[b-w0ylea4dic] {
    margin-bottom: 0.75rem;
}

.timeslot-label[b-w0ylea4dic] {
    display: block;
    font-size: 0.75rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}

.timeslot-buttons[b-w0ylea4dic] {
    display: flex;
    gap: 0.4rem;
}

.timeslot-btn[b-w0ylea4dic] {
    padding: 0.35rem 0.85rem;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: #ccc;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.timeslot-btn--selected[b-w0ylea4dic] {
    background: rgba(0, 212, 170, 0.2);
    border-color: #00d4aa;
    color: #00d4aa;
}

/* ── Member Status List ───────────────────────────────────────── */

.member-status-list[b-w0ylea4dic] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 0.6rem;
}

.member-status-row[b-w0ylea4dic] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.member-avatar[b-w0ylea4dic] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ccc;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.member-status-name[b-w0ylea4dic] {
    flex: 1;
    font-size: 0.85rem;
    color: #ddd;
}

.member-status-icon[b-w0ylea4dic] {
    font-size: 0.8rem;
    font-weight: 700;
    font-family: monospace;
}

.member-status-icon--yes[b-w0ylea4dic] { color: #00d4aa; }
.member-status-icon--no[b-w0ylea4dic] { color: #f87171; }
.member-status-icon--maybe[b-w0ylea4dic] { color: #F59E0B; }

/* ── Candidate List (Voting) ──────────────────────────────────── */

.candidate-list[b-w0ylea4dic] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.candidate-card[b-w0ylea4dic] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    padding: 0.65rem 0.75rem;
}

.candidate-header[b-w0ylea4dic] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
    gap: 0.5rem;
}

.candidate-name[b-w0ylea4dic] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffffff;
    flex: 1;
}

.candidate-source-badge[b-w0ylea4dic] {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 0.2rem;
    background: rgba(99, 179, 237, 0.1);
    color: #63b3ed;
    border: 1px solid rgba(99, 179, 237, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.vote-buttons[b-w0ylea4dic] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    flex-wrap: wrap;
}

.vote-btn[b-w0ylea4dic] {
    padding: 0.3rem 0.7rem;
    border-radius: 0.3rem;
    border: 1px solid;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.vote-btn--up[b-w0ylea4dic] {
    background: rgba(0, 212, 170, 0.1);
    color: #00d4aa;
    border-color: rgba(0, 212, 170, 0.3);
}

.vote-btn--up:hover[b-w0ylea4dic] {
    background: rgba(0, 212, 170, 0.2);
}

.vote-btn--down[b-w0ylea4dic] {
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.25);
}

.vote-btn--down:hover[b-w0ylea4dic] {
    background: rgba(239, 68, 68, 0.18);
}

.vote-count[b-w0ylea4dic] {
    font-size: 0.75rem;
    opacity: 0.8;
}

.candidate-score[b-w0ylea4dic] {
    font-size: 0.78rem;
    color: #aaa;
    margin-left: auto;
}

/* ── Suggest Section ──────────────────────────────────────────── */

.suggest-section[b-w0ylea4dic] {
    margin-top: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.suggest-input-row[b-w0ylea4dic] {
    display: flex;
    gap: 0.5rem;
}

.suggest-input[b-w0ylea4dic] {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    color: #fff;
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
}

.suggest-input:focus[b-w0ylea4dic] {
    outline: none;
    border-color: #00d4aa;
}

.btn-suggest[b-w0ylea4dic] {
    background: rgba(0, 212, 170, 0.15);
    border: 1px solid rgba(0, 212, 170, 0.35);
    color: #00d4aa;
    border-radius: 0.5rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.btn-suggest:hover:not(:disabled)[b-w0ylea4dic] {
    background: rgba(0, 212, 170, 0.25);
}

.btn-suggest:disabled[b-w0ylea4dic] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Tie-Break Section ────────────────────────────────────────── */

.tiebreak-section[b-w0ylea4dic] {
    margin-top: 0.75rem;
    padding: 0.65rem;
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 0.5rem;
}

.tiebreak-title[b-w0ylea4dic] {
    display: block;
    font-size: 0.78rem;
    color: #F59E0B;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.45rem;
}

.tiebreak-buttons[b-w0ylea4dic] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.btn-tiebreak[b-w0ylea4dic] {
    padding: 0.35rem 0.7rem;
    border-radius: 0.35rem;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-tiebreak:hover[b-w0ylea4dic] {
    background: rgba(245, 158, 11, 0.2);
}

/* ── Confirmed State ──────────────────────────────────────────── */

.round-card--confirmed[b-w0ylea4dic] {
    background: rgba(0, 212, 170, 0.06);
    border-color: rgba(0, 212, 170, 0.2);
}

.confirmed-restaurant[b-w0ylea4dic] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 0.5rem 0 0.75rem;
}

.confirmed-restaurant-name[b-w0ylea4dic] {
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
}

.confirmed-time[b-w0ylea4dic] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #00d4aa;
}

.btn-menu-link[b-w0ylea4dic] {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.3rem 0.75rem;
    background: rgba(0, 212, 170, 0.12);
    border: 1px solid rgba(0, 212, 170, 0.3);
    border-radius: 0.35rem;
    color: #00d4aa;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease;
}

.btn-menu-link:hover[b-w0ylea4dic] {
    background: rgba(0, 212, 170, 0.22);
}

.btn-menu-link--prominent[b-w0ylea4dic] {
    padding: 0.45rem 1.2rem;
    font-size: 0.9rem;
}

.attendee-list[b-w0ylea4dic] {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.attendee-list-title[b-w0ylea4dic] {
    display: block;
    font-size: 0.72rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
}

.attendee-row[b-w0ylea4dic] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #ddd;
}

.attendee-timeslot[b-w0ylea4dic] {
    margin-left: auto;
    font-size: 0.75rem;
    color: #888;
}

/* ── Completed (History) State ────────────────────────────────── */

.round-card--completed[b-w0ylea4dic] {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
    padding: 0.6rem 0.85rem;
}

.round-card-completed[b-w0ylea4dic] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.completed-restaurant[b-w0ylea4dic] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #999;
}

.completed-date[b-w0ylea4dic] {
    font-size: 0.78rem;
    color: #666;
}

/* ── Cancelled State ──────────────────────────────────────────── */

.round-card--cancelled[b-w0ylea4dic] {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(239, 68, 68, 0.15);
    padding: 0.65rem 0.85rem;
}

.round-card-cancelled[b-w0ylea4dic] {
    display: flex;
    align-items: center;
}

.cancelled-label[b-w0ylea4dic] {
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
}

/* ── Cancel Button ────────────────────────────────────────────── */

.btn-cancel-round[b-w0ylea4dic] {
    display: block;
    margin-top: 0.65rem;
    padding: 0;
    background: none;
    border: none;
    color: #666;
    font-size: 0.78rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}

.btn-cancel-round:hover[b-w0ylea4dic] {
    color: #f87171;
}

/* ── Responsive ───────────────────────────────────────────────── */

@media (min-width: 520px) {
    .round-card[b-w0ylea4dic] {
        border-radius: 0.85rem;
        padding: 1.25rem;
    }
}
/* /Shared/Components/Notifications/NotificationBellComponent.razor.rz.scp.css */
/* Phase 195 — Notification bell. Tokens declared in colors_and_type.css. */

.notification-bell[b-9iwhqtafsl] {
    position: relative;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
}

.notification-bell:hover[b-9iwhqtafsl] { color: var(--accent); }

.bell-badge[b-9iwhqtafsl] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-on-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bell-badge.badge-critical[b-9iwhqtafsl] { background: var(--color-status-critical); }
.bell-badge.badge-warning[b-9iwhqtafsl]  { background: var(--color-status-warning);  }
.bell-badge.badge-info[b-9iwhqtafsl]     { background: var(--color-accent-primary);  }
/* /Shared/Components/Notifications/NotificationInboxComponent.razor.rz.scp.css */
/* z-index: above the notification strip so body content cannot intercept the flyout. */

.inbox-backdrop[b-81gorbl35v] {
    position: fixed; inset: 0; background: transparent; z-index: 1101;
}

.inbox-panel[b-81gorbl35v] {
    position: fixed; top: 3.5rem; right: 1rem;
    width: min(380px, calc(100vw - 2rem));
    max-height: 70vh;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 1102;
    display: flex; flex-direction: column;
    overflow: hidden;
}

.inbox-header[b-81gorbl35v] { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.inbox-title[b-81gorbl35v]  { font-weight: 700; }
.inbox-close[b-81gorbl35v]  { background: transparent; border: none; color: var(--text-muted); cursor: pointer; }

.inbox-tabs[b-81gorbl35v] { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
.inbox-tab[b-81gorbl35v] {
    background: var(--surface-subtle); color: var(--text-secondary);
    border: 1px solid var(--border); border-radius: 999px;
    padding: 0.25rem 0.6rem; font-size: 0.75rem; cursor: pointer;
}
.inbox-tab.active[b-81gorbl35v] { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }

.inbox-list[b-81gorbl35v] { overflow-y: auto; padding: 0.25rem 0; }
.inbox-empty[b-81gorbl35v] { padding: 1.5rem 1rem; text-align: center; color: var(--text-muted); font-size: 0.9rem; }

.notification-row[b-81gorbl35v] {
    position: relative; display: flex; gap: 0.5rem; align-items: flex-start;
    padding: 0.6rem 0.75rem 0.6rem 1rem; border-bottom: 1px solid var(--border);
}
.notification-row .row-stripe[b-81gorbl35v] { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.notification-row.row-critical .row-stripe[b-81gorbl35v] { background: var(--color-status-critical); }
.notification-row.row-warning  .row-stripe[b-81gorbl35v] { background: var(--color-status-warning);  }
.notification-row.row-info     .row-stripe[b-81gorbl35v] { background: var(--color-status-info);     }

.row-icon[b-81gorbl35v]  { color: var(--text-muted); flex: 0 0 auto; padding-top: 0.15rem; }
.row-body[b-81gorbl35v]  { flex: 1 1 auto; min-width: 0; }
.row-title[b-81gorbl35v] { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.row-text[b-81gorbl35v]  { font-size: 0.85rem; color: var(--text-secondary);
             display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row-meta[b-81gorbl35v]  { font-size: 0.7rem; color: var(--text-muted); display: flex; gap: 0.75rem; align-items: center; margin-top: 0.25rem; }
.row-link[b-81gorbl35v]  { color: var(--accent); text-decoration: none; font-weight: 600; }

.row-dismiss[b-81gorbl35v] { background: transparent; border: none; color: var(--text-muted); cursor: pointer; align-self: flex-start; }
.row-dismiss:hover[b-81gorbl35v] { color: var(--color-status-critical); }

/* Phase 201 NOTIF-08 — snooze button + popover (tokens-only per CLAUDE.md DS rules) */
.row-snooze[b-81gorbl35v] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
}
.row-snooze:hover[b-81gorbl35v] { color: var(--text-primary); }

.row-snooze-wrapper[b-81gorbl35v] { position: relative; }

.snooze-popover[b-81gorbl35v] {
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-2);
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    z-index: 10;
}
.snooze-popover button[b-81gorbl35v] {
    background: transparent;
    border: none;
    text-align: left;
    padding: 0.5rem 0.75rem;
    color: var(--text-primary);
    cursor: pointer;
}
.snooze-popover button:hover[b-81gorbl35v] { background: var(--accent-soft); }
/* /Shared/Components/Notifications/NotificationToastComponent.razor.rz.scp.css */
/* z-index 9500 — above page content, below PWA update banner (99999). */

.toast-stack[b-b0h4whec74] {
    position: fixed; top: 0.75rem; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; gap: 0.5rem;
    z-index: 9500;
    pointer-events: none;
}

.toast-banner[b-b0h4whec74] {
    pointer-events: auto;
    min-width: 280px; max-width: 480px;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-primary);
    border-left: 4px solid var(--color-status-info);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    display: flex; gap: 0.75rem; align-items: flex-start;
    cursor: pointer;
}

.toast-banner.toast-critical[b-b0h4whec74] { border-left-color: var(--color-status-critical); }
.toast-banner.toast-warning[b-b0h4whec74]  { border-left-color: var(--color-status-warning);  }
.toast-banner.toast-info[b-b0h4whec74]     { border-left-color: var(--color-status-info);     }

.toast-title[b-b0h4whec74]  { font-weight: 700; }
.toast-body[b-b0h4whec74]   { color: var(--text-secondary); font-size: 0.9rem; }
.toast-dismiss[b-b0h4whec74] { margin-left: auto; background: transparent; border: none; color: var(--text-muted); cursor: pointer; }
/* /Shared/Components/OrderPage/OrderPageOrderLineAccordion.razor.rz.scp.css */
.OrderHeader[b-vd1gxbfm75] {
    font-size: small;
    color: #808080;
    margin: 5px;
    font-weight: 500;
}

.wrapper[b-vd1gxbfm75] {
    width: auto;
    height: auto;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    /*grid-template-columns: 50px auto 65px;*/
    color: #808080;
}

.left[b-vd1gxbfm75] {
    /*height: 65px;*/
}

.Center[b-vd1gxbfm75] {
    text-align: left;
    /* height: 65px;*/
}

.right[b-vd1gxbfm75] {
    /*height: 65px;*/
}

.ProductNumber[b-vd1gxbfm75] {
    position: absolute;
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 14px !important;
    font-weight: 700;
    padding-top: 5px;
    padding-left: 0.6em;
}

.ProductName[b-vd1gxbfm75] {
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 14px !important;
    font-weight: 700;
    padding-top: 5px;
    padding-left: 0.6em;
}

.ProductDescription[b-vd1gxbfm75] {
    padding-top: 2px;
    padding-left: 0.6em;
    word-wrap: break-word;
}

.DescriptionText[b-vd1gxbfm75] {
    width: 97%;
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 12px !important;
}

.ProductPrice[b-vd1gxbfm75] {
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 14px !important;
    font-weight: 700;
    padding-top: 5px;
    padding-left: 0.6em;
    right: 20px;
    position: absolute;
    width: 6em;
}

.TotalAmount[b-vd1gxbfm75] {
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 18px !important;
    font-weight: 700;
    right: 20px;
    position: absolute;
}


[b-vd1gxbfm75] .TextBoxMultilineHeight {
    height: 5em;
}

.MessageBox[b-vd1gxbfm75] {
    font-family: Helvetica, 'Segoe UI' !important;
    vert-align: top;
    padding: 20px;
    font-size: medium;
}

.OrderNumber[b-vd1gxbfm75] {
    font-size: 60px;
    text-align: center;
    width: 3em;
    padding: 0.2em 0.2em;
    margin: auto; /* Centerizes the order number box */
}

/* DivTable.com */
.divTable[b-vd1gxbfm75] {
    font-family: Helvetica, 'Segoe UI' !important;
    display: table;
    width: 100%;
    min-width: 250px;
    margin: 0 auto;
}

.divTableRow[b-vd1gxbfm75] {
    display: table-row;
}

.divTableCell[b-vd1gxbfm75], .divTableHead[b-vd1gxbfm75] {
    border: 0px solid #999999;
    display: table-cell;
    padding: 3px 10px;
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 14px !important;
}

.divTableHeading[b-vd1gxbfm75] {
    background-color: #EEE;
    display: table-header-group;
    font-weight: bold;
}

.divTableFoot[b-vd1gxbfm75] {
    background-color: #EEE;
    display: table-footer-group;
    font-weight: bold;
}

.divTableBody[b-vd1gxbfm75] {
    display: table-row-group;
}
/* /Shared/Components/Product/ImageStudio/ImageCompareView.razor.rz.scp.css */
.compare-view[b-pbkjg0nixs] {
    display: flex;
    gap: 2px;
    padding: 16px;
    background: #f5f5f5;
    min-height: 240px;
}

.compare-panel[b-pbkjg0nixs] {
    flex: 1;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    min-height: 220px;
}

.compare-previous[b-pbkjg0nixs] {
    opacity: 0.85;
}

.compare-new[b-pbkjg0nixs] {
    border: 2px solid #667eea;
    box-shadow: 0 0 16px rgba(102, 126, 234, 0.12);
}

.compare-label[b-pbkjg0nixs] {
    position: absolute;
    top: 8px;
    left: 10px;
    background: rgba(0, 0, 0, 0.06);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    color: #888;
    z-index: 1;
}

.compare-label-new[b-pbkjg0nixs] {
    background: rgba(102, 126, 234, 0.15);
    color: #667eea;
}

.compare-divider[b-pbkjg0nixs] {
    display: flex;
    align-items: center;
    padding: 0 4px;
}

.compare-divider-icon[b-pbkjg0nixs] {
    background: #667eea;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.compare-actions[b-pbkjg0nixs] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #e0e0e0;
    align-items: center;
    background: #fafafa;
}

.compare-feedback-input[b-pbkjg0nixs] {
    flex: 1;
}

.feedback-inline[b-pbkjg0nixs] {
    width: 100%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #333;
    outline: none;
    transition: border-color 0.15s ease;
}

.feedback-inline:focus[b-pbkjg0nixs] {
    border-color: #667eea;
}

.feedback-inline[b-pbkjg0nixs]::placeholder {
    color: #999;
}

.compare-buttons[b-pbkjg0nixs] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.btn-try-again[b-pbkjg0nixs] {
    background: #f0f0f0;
    color: #555;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid #ddd;
    transition: background 0.15s ease;
}

.btn-try-again:hover:not(:disabled)[b-pbkjg0nixs] {
    background: #e0e0e0;
}

.btn-try-again:disabled[b-pbkjg0nixs] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-try-again .spinner-border-sm[b-pbkjg0nixs] {
    width: 12px;
    height: 12px;
    margin-right: 6px;
}

.btn-use-this[b-pbkjg0nixs] {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    font-weight: 500;
    transition: box-shadow 0.15s ease;
}

.btn-use-this:hover[b-pbkjg0nixs] {
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}
/* /Shared/Components/Product/ImageStudio/ImageHistoryStrip.razor.rz.scp.css */
.history-strip[b-tgnj4w43yj] {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 8px 0;
    overflow-x: auto;
}

.history-label[b-tgnj4w43yj] {
    font-size: 10px;
    color: #999;
    margin-right: 4px;
    white-space: nowrap;
}

.history-thumb[b-tgnj4w43yj] {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    border: 1px solid #e0e0e0;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.history-thumb:hover[b-tgnj4w43yj] {
    opacity: 1;
}

.history-thumb-current[b-tgnj4w43yj] {
    opacity: 1;
    border-color: #667eea;
}

.history-img[b-tgnj4w43yj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history-version[b-tgnj4w43yj] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 8px;
    text-align: center;
    padding: 1px 0;
}
/* /Shared/Components/Product/ImageStudio/ImageSlotRow.razor.rz.scp.css */
.image-slot-row[b-ueakul7i6m] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
    overflow-x: auto;
}

.slot[b-ueakul7i6m] {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    border: 2px solid transparent;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    background: #f5f5f5;
    transition: border-color 0.15s ease;
}

.slot:hover[b-ueakul7i6m] {
    border-color: #90caf9;
}

.slot-selected[b-ueakul7i6m] {
    border-color: #667eea;
}

.slot-img[b-ueakul7i6m] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slot-badge[b-ueakul7i6m] {
    position: absolute;
    top: -2px;
    left: -2px;
    padding: 1px 4px;
    border-radius: 4px;
    font-size: 7px;
    font-weight: bold;
    color: white;
}

.slot-badge-primary[b-ueakul7i6m] {
    background: #4CAF50;
}

.slot-edit-indicator[b-ueakul7i6m] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: #667eea;
    color: white;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slot-add[b-ueakul7i6m] {
    background: #fafafa;
    border: 2px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slot-add:hover[b-ueakul7i6m] {
    border-color: #667eea;
    background: #f0f7ff;
}

.slot-add-icon[b-ueakul7i6m] {
    font-size: 20px;
    color: #999;
}
/* /Shared/Components/Product/ProductActionsCard.razor.rz.scp.css */
[b-ne44i11hm1] .Action-Card {
    margin-top: 5px;
}

.wrapper[b-ne44i11hm1] {
    width: auto;
    height: auto;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(6, 1fr);
}

.wrapper-left[b-ne44i11hm1] {
    text-align: left;
    grid-column: 1/1;
    border: 1px;
    padding: 0 2px;
}

.wrapper-right[b-ne44i11hm1] {
    text-align: right;
    grid-column: 3/7;
    border: 1px;
}
/* /Shared/Components/Product/ProductAllergenEditor.razor.rz.scp.css */
.allergen-editor[b-gehazzq2s9] {
    padding: 20px;
}

.allergen-checkboxes[b-gehazzq2s9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-check[b-gehazzq2s9] {
    margin-bottom: 8px;
}
/* /Shared/Components/Product/ProductAttributesCard.razor.rz.scp.css */
.grid-container[b-xn2u6jhkj6] {
    display: grid;
    grid-template-columns: auto auto;
    padding: 10px;
    font-size: 14px;
}

.grid-item-left[b-xn2u6jhkj6] {
    font-size: small;
    text-align: left;
    border-bottom: 2px solid #cccccc;
    color: #202020;
    font-size: smaller;
    padding-bottom: 5px;
    padding-top: 5px;
}

.grid-item-right[b-xn2u6jhkj6] {
    font-size: small;
    text-align: right;
    border-bottom: 2px solid #cccccc;
    color: #202020;
    font-size: smaller;
    padding-bottom: 5px;
    padding-top: 5px;
}

.grid-item-wide-Span-2[b-xn2u6jhkj6] {
    grid-column: span 2;
    margin-left: 0;
    padding-bottom: 20px;
}
/* /Shared/Components/Product/ProductAttributesEditor.razor.rz.scp.css */
/* Delete button - subtle X that turns red on hover */
.delete-btn[b-2bosge3dar] {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.delete-btn:hover[b-2bosge3dar] {
    background-color: #ffebee;
    color: #d32f2f;
}

/* Add button styling */
.add-btn[b-2bosge3dar] {
    width: 28px;
    height: 28px;
    border: 1px solid #ccc;
    background: #fff;
    color: #666;
    font-size: 18px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.add-btn:hover[b-2bosge3dar] {
    background-color: #f5f5f5;
    border-color: #999;
    color: #333;
}
/* /Shared/Components/Product/ProductCreateNewDialog.razor.rz.scp.css */
/* /Shared/Components/Product/ProductDescriptionCard.razor.rz.scp.css */

.grid-container[b-xmry1mi2aq] {
    display: grid;
    grid-template-columns: auto auto;
    padding: 10px;
    font-size: 14px;
}

.grid-item-left[b-xmry1mi2aq] {
    font-size: small;
    text-align: left;
    border-bottom: 2px solid #cccccc;
    color: #202020;
    font-size: smaller;
    padding-bottom: 5px;
    padding-top: 5px;
}

.grid-item-right[b-xmry1mi2aq] {
    font-size: small;
    text-align: right;
    border-bottom: 2px solid #cccccc;
    color: #202020;
    font-size: smaller;
    padding-bottom: 5px;
    padding-top: 5px;
}

.grid-item-wide-Span-2[b-xmry1mi2aq] {
    grid-column: span 2;
    margin-left: 0;
    padding-bottom: 20px;
}
/* /Shared/Components/Product/ProductGrid.razor.rz.scp.css */
[b-qbdgihl32l] .e-grid .e-sortnumber {
    display: none;
}

[b-qbdgihl32l] .e-grid .e-sortfilterdiv {
    display: none;
}

/*Grid Cards*/
[b-qbdgihl32l] .grid-container {
    display: grid;
    grid-template-columns: auto auto;
    /*background-color: #2196F3;*/
    padding: 10px;
    font-family: "Helvetica Neue","Helvetica","Arial",sans-serif,"-apple-system","BlinkMacSystemFont";
    font-size: 14px;
}

[b-qbdgihl32l] .grid-item-left {
    /*background-color: rgba(255, 255, 255, 0.8);*/
    /*border: 1px solid rgba(0, 0, 0, 0.8);*/
    padding: 10px;
    font-size: small;
    text-align: left;
    border-bottom: 2px solid #cccccc;
    font-family: "Helvetica Neue","Helvetica","Arial",sans-serif,"-apple-system","BlinkMacSystemFont";
    font-size: 14px;
}

[b-qbdgihl32l] .grid-item-right {
    /*background-color: rgba(255, 255, 255, 0.8);*/
    /*border: 1px solid rgba(0, 0, 0, 0.8);*/
    padding: 10px;
    font-size: small;
    text-align: right;
    border-bottom: 2px solid #cccccc;
    font-family: "Helvetica Neue","Helvetica","Arial",sans-serif,"-apple-system","BlinkMacSystemFont";
    /*font-size: 24px;*/
}
/* /Shared/Components/Product/ProductMainCard.razor.rz.scp.css */
/* Main Grid Layout */
.product-form-grid[b-nxebzsdhcx] {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    padding: 16px;
}

/* Left Column - Image */
.product-image-column[b-nxebzsdhcx] {
    display: flex;
    flex-direction: column;
}

.product-image-container[b-nxebzsdhcx] {
    width: 200px;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
}

.product-image[b-nxebzsdhcx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Right Column - Form Fields */
.product-fields-column[b-nxebzsdhcx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Field Groups */
.field-group[b-nxebzsdhcx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-small[b-nxebzsdhcx] {
    max-width: 120px;
}

.field-medium[b-nxebzsdhcx] {
    max-width: 200px;
}

/* Inline Row for multiple fields */
.field-row-inline[b-nxebzsdhcx] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* Labels */
.field-label[b-nxebzsdhcx] {
    font-size: 12px;
    font-weight: 500;
    color: #666;
    margin-bottom: 2px;
}

/* Description Textarea */
[b-nxebzsdhcx] .description-textarea {
    min-height: 80px;
}

[b-nxebzsdhcx] .description-textarea textarea {
    min-height: 80px;
    resize: vertical;
}

/* AI Button Row */
.ai-button-row[b-nxebzsdhcx] {
    margin-top: 8px;
}

.ai-button[b-nxebzsdhcx] {
    font-size: 12px;
    padding: 6px 16px;
}

.ai-button .spinner-border-sm[b-nxebzsdhcx] {
    width: 12px;
    height: 12px;
    margin-right: 6px;
}

/* AI Suggestion */
.ai-suggestion[b-nxebzsdhcx] {
    margin-top: 16px;
}

.ai-suggestion-header[b-nxebzsdhcx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.ai-suggestion-title[b-nxebzsdhcx] {
    font-size: 12px;
    font-weight: 600;
    color: #1976d2;
}

.ai-suggestion-meta[b-nxebzsdhcx] {
    font-size: 10px;
    color: #666;
}

.ai-suggestion-text[b-nxebzsdhcx] {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    padding: 12px;
    background-color: #f0f7ff;
    border: 1px solid #b3d4fc;
    border-radius: 6px;
}

.ai-suggestion-error[b-nxebzsdhcx] {
    font-size: 13px;
    color: #d32f2f;
    padding: 12px;
    background-color: #ffebee;
    border-radius: 6px;
}

.ai-suggestion-actions[b-nxebzsdhcx] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 12px;
}

/* Updated Timestamp */
.updated-timestamp[b-nxebzsdhcx] {
    font-size: 11px;
    color: #999;
    text-align: right;
    margin-top: 8px;
}

/* Spinner animation */
.spinner-border[b-nxebzsdhcx] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-nxebzsdhcx 0.75s linear infinite;
}

.spinner-border-sm[b-nxebzsdhcx] {
    width: 0.75rem;
    height: 0.75rem;
    border-width: 0.1em;
}

@keyframes spinner-border-b-nxebzsdhcx {
    to {
        transform: rotate(360deg);
    }
}

/* AI Suggestion Accordion Animation */
@keyframes slideDown-b-nxebzsdhcx {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        max-height: 300px;
        transform: translateY(0);
    }
}

.ai-suggestion-accordion[b-nxebzsdhcx] {
    animation: slideDown-b-nxebzsdhcx 0.8s ease-out forwards;
}
/* /Shared/Components/Product/ProductMainCardDialog.razor.rz.scp.css */
/* === Dialog Container === */
[b-yjno4cmnzk] .product-dialog-v2 .e-dlg-content {
    padding: 0 !important;
}

[b-yjno4cmnzk] .product-dialog-v2 {
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
}

/* === Dialog Header === */
.dialog-header-v2[b-yjno4cmnzk] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dialog-header-name[b-yjno4cmnzk] {
    font-size: 18px;
    font-weight: 600;
    color: #1e2330;
}

.dialog-header-number[b-yjno4cmnzk] {
    font-size: 13px;
    font-weight: 500;
    color: #8b92a0;
    background: #f0f1f3;
    padding: 2px 8px;
    border-radius: 4px;
}

[b-yjno4cmnzk] .product-dialog-v2 .e-dlg-header-content {
    padding: 16px 24px !important;
    border-bottom: 1px solid #e9ecef !important;
}

/* === Tab Styling === */
[b-yjno4cmnzk] .dialog-tabs-v2 .e-tab-header {
    background-color: #fafbfc !important;
    border-bottom: 1px solid #e9ecef !important;
    padding: 0 16px !important;
}

[b-yjno4cmnzk] .dialog-tabs-v2 .e-tab-header .e-toolbar-item .e-tab-text {
    color: #6b7280 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

[b-yjno4cmnzk] .dialog-tabs-v2 .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: #1784c7 !important;
    font-weight: 600 !important;
}

[b-yjno4cmnzk] .dialog-tabs-v2 .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    border-bottom: 2px solid #1784c7 !important;
}

[b-yjno4cmnzk] .dialog-tabs-v2 .e-tab-header .e-indicator {
    background-color: #1784c7 !important;
}

[b-yjno4cmnzk] .dialog-tabs-v2 .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-text:hover {
    color: #1e2330 !important;
}

[b-yjno4cmnzk] .dialog-tabs-v2 .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
    background-color: #f0f1f3 !important;
}

[b-yjno4cmnzk] .dialog-tabs-v2 .e-tab-header .e-toolbar-item .e-tab-wrap:focus {
    background-color: #f0f1f3 !important;
}

/* === Tab Content === */
[b-yjno4cmnzk] .dialog-tabs-v2 .e-content {
    min-height: 480px !important;
    padding: 16px 24px !important;
}

[b-yjno4cmnzk] .dialog-tabs-v2 .e-content .e-item {
    min-height: 480px !important;
}

/* === Dialog Footer Buttons === */
[b-yjno4cmnzk] .product-dialog-v2 .e-footer-content {
    padding: 12px 24px !important;
    border-top: 1px solid #e9ecef !important;
    background: #fafbfc !important;
}

[b-yjno4cmnzk] .dialog-btn-save {
    background: #1784c7 !important;
    border-color: #1784c7 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 8px 24px !important;
}

[b-yjno4cmnzk] .dialog-btn-save:hover {
    background: #1369a0 !important;
    border-color: #1369a0 !important;
}

[b-yjno4cmnzk] .dialog-btn-cancel {
    border-radius: 8px !important;
    padding: 8px 24px !important;
    color: #6b7280 !important;
    border-color: #d1d5db !important;
}

[b-yjno4cmnzk] .dialog-btn-cancel:hover {
    background: #f3f4f6 !important;
    color: #1e2330 !important;
}

/* === Close icon === */
[b-yjno4cmnzk] .product-dialog-v2 .e-dlg-closeicon-btn {
    color: #6b7280 !important;
}

[b-yjno4cmnzk] .product-dialog-v2 .e-dlg-closeicon-btn:hover {
    background: #f3f4f6 !important;
    color: #1e2330 !important;
}

/* === Legacy classes kept for sub-components === */
.square-container[b-yjno4cmnzk] {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
}

.square-image[b-yjno4cmnzk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-counter-badge[b-yjno4cmnzk] {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 0.8em;
}

/* Story Publish Button in Dialog Footer */
[b-yjno4cmnzk] .dialog-btn-story {
    color: #7c3aed !important;
    border-color: rgba(124, 58, 237, 0.4) !important;
}

[b-yjno4cmnzk] .dialog-btn-story:hover {
    background: rgba(124, 58, 237, 0.08) !important;
}
/* /Shared/Components/Product/ProductMultiImageManager.razor.rz.scp.css */
/* Image Studio Layout */
.image-studio[b-gtu8t5m2p6] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.studio-canvas[b-gtu8t5m2p6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Canvas Image Area */
.canvas-image-area[b-gtu8t5m2p6] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: #fafafa;
    position: relative;
}

.canvas-actions[b-gtu8t5m2p6] {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 6px;
}

.canvas-action-btn[b-gtu8t5m2p6] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.canvas-action-btn:hover[b-gtu8t5m2p6] {
    background: #f0f7ff;
    border-color: #90caf9;
}

.canvas-action-btn-danger:hover[b-gtu8t5m2p6] {
    background: #ffebee;
    border-color: #ef9a9a;
    color: #c62828;
}

.canvas-version[b-gtu8t5m2p6] {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
}

/* Studio Input Area */
.studio-input-area[b-gtu8t5m2p6] {
    border-top: 1px solid #e0e0e0;
    padding: 10px 12px;
    background: #fafafa;
}

.input-row[b-gtu8t5m2p6] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.feedback-input[b-gtu8t5m2p6] {
    flex: 1;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #333;
    outline: none;
    transition: border-color 0.15s ease;
}

.feedback-input:focus[b-gtu8t5m2p6] {
    border-color: #667eea;
}

.feedback-input[b-gtu8t5m2p6]::placeholder {
    color: #999;
}

.btn-regenerate[b-gtu8t5m2p6] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 500;
    transition: box-shadow 0.15s ease;
    flex-shrink: 0;
}

.btn-regenerate:hover:not(:disabled)[b-gtu8t5m2p6] {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-regenerate:disabled[b-gtu8t5m2p6] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-regenerate .spinner-border-sm[b-gtu8t5m2p6] {
    width: 12px;
    height: 12px;
    margin-right: 6px;
}

/* Quick Tags */
.quick-tags[b-gtu8t5m2p6] {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.quick-tag[b-gtu8t5m2p6] {
    background: #f0f0f0;
    border: 1px solid #e0e0e0;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    color: #666;
    cursor: pointer;
    transition: all 0.15s ease;
}

.quick-tag:hover[b-gtu8t5m2p6] {
    background: #e8eaf6;
    border-color: #667eea;
    color: #667eea;
}

/* Reference Photo */
.reference-drop-zone[b-gtu8t5m2p6] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.reference-hint[b-gtu8t5m2p6] {
    font-size: 11px;
    color: #999;
}

.reference-preview[b-gtu8t5m2p6] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.reference-thumb[b-gtu8t5m2p6] {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid #ddd;
}

.reference-remove[b-gtu8t5m2p6] {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 12px;
}

.reference-remove:hover[b-gtu8t5m2p6] {
    color: #c62828;
}

.reference-label[b-gtu8t5m2p6] {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reference-label[b-gtu8t5m2p6]  input[type="file"] {
    display: none;
}

/* Error Message */
.error-message[b-gtu8t5m2p6] {
    padding: 10px;
    background: #ffebee;
    color: #c62828;
    border-radius: 4px;
    font-size: 13px;
    margin-top: 8px;
}

/* Empty State */
.empty-state[b-gtu8t5m2p6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    flex: 1;
}

.empty-icon[b-gtu8t5m2p6] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.6;
}

.empty-title[b-gtu8t5m2p6] {
    font-size: 16px;
    color: #333;
    margin-bottom: 6px;
}

.empty-subtitle[b-gtu8t5m2p6] {
    font-size: 12px;
    color: #999;
    max-width: 320px;
    line-height: 1.5;
}

.empty-reference-zone[b-gtu8t5m2p6] {
    margin-top: 20px;
    background: #f5f5f5;
    border: 2px dashed #ddd;
    border-radius: 10px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.empty-reference-zone:hover[b-gtu8t5m2p6] {
    border-color: #667eea;
    background: #f0f7ff;
}

.empty-reference-icon[b-gtu8t5m2p6] {
    font-size: 24px;
}

.empty-reference-text[b-gtu8t5m2p6] {
    text-align: left;
    font-size: 12px;
    color: #666;
}

.empty-reference-hint[b-gtu8t5m2p6] {
    font-size: 11px;
    color: #999;
}

.empty-input-area[b-gtu8t5m2p6] {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    width: 100%;
    max-width: 480px;
}

.empty-hint[b-gtu8t5m2p6] {
    font-size: 11px;
    color: #aaa;
    margin-top: 6px;
}

/* Video Section */
.studio-video-section[b-gtu8t5m2p6] {
    border-top: 1px solid #e0e0e0;
    padding: 12px 16px;
}

.section-header[b-gtu8t5m2p6] {
    font-size: 12px;
    font-weight: 500;
    color: #666;
    margin-bottom: 8px;
}

.video-preview[b-gtu8t5m2p6] {
    position: relative;
}

.video-delete-btn[b-gtu8t5m2p6] {
    position: absolute;
    top: 8px;
    right: 8px;
}

/* Gallery delete btn (reused for video) */
.gallery-delete-btn[b-gtu8t5m2p6] {
    width: 22px;
    height: 22px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: #999;
    font-size: 12px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: all 0.15s ease;
}

.gallery-delete-btn:hover[b-gtu8t5m2p6] {
    background-color: #ffebee;
    color: #d32f2f;
}

/* Add Menu */
.add-menu-options[b-gtu8t5m2p6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.add-menu-btn[b-gtu8t5m2p6] {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.15s ease;
}

.add-menu-btn:hover[b-gtu8t5m2p6] {
    background: #f0f7ff;
    border-color: #90caf9;
}

.add-menu-upload[b-gtu8t5m2p6] {
    margin-top: 8px;
}
/* /Shared/Components/Product/ProductSingleCardV2.razor.rz.scp.css */
/* ProductSingleCardV2 — Wave 1 token migration
   See: qonnect-design-system/project/preview/domain-primitives/product-list-view.html (shared drift rules)
   Removed: font-family overrides, hex colors, dead CSS inherited from V1.
   Token source: qonnect-design-system/project/colors_and_type.css */

.CardHeader[b-5qt0j52vfw] {
    font-size: var(--size-300);
    color: var(--text-muted);
    margin: var(--space-1);
    font-weight: var(--weight-medium);
    font-family: var(--font-sans);
}

.CardMargin[b-5qt0j52vfw] {
    padding-bottom: var(--space-3);
}

[b-5qt0j52vfw] .e-card .e-card-content {
    padding: 0;
    margin: 0;
}

/* --- Image card (square aspect) --- */
.ImageCard[b-5qt0j52vfw] {
    position: relative;
    width: 100%;
    padding-top: 100%; /* square */
    margin-bottom: calc(-1 * var(--space-3));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.centered-button[b-5qt0j52vfw] {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-3);
}

[b-5qt0j52vfw] .ImageCardButton {
    background-color: rgba(26, 26, 26, 0.5); /* rgba of --ink */
    border-color: var(--surface);
    box-shadow: none;
    color: var(--surface);
    font-weight: var(--weight-medium);
    font-family: var(--font-sans);
    margin: var(--space-3);
}
/* /Shared/Components/Push/NotificationPrompt.razor.rz.scp.css */
.notification-prompt[b-7pwcwiw07y] {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 9999;
    display: flex;
    justify-content: center;
}

.prompt-content[b-7pwcwiw07y] {
    background: white;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 480px;
    width: 100%;
}

.prompt-icon[b-7pwcwiw07y] {
    font-size: 24px;
    flex-shrink: 0;
}

.prompt-text[b-7pwcwiw07y] {
    font-size: 14px;
    color: #333;
    flex: 1;
}

.prompt-actions[b-7pwcwiw07y] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.prompt-btn[b-7pwcwiw07y] {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    border: none;
    font-weight: 500;
}

.prompt-btn-enable[b-7pwcwiw07y] {
    background: #667eea;
    color: white;
}

.prompt-btn-enable:hover[b-7pwcwiw07y] {
    background: #5a6fd6;
}

.prompt-btn-dismiss[b-7pwcwiw07y] {
    background: transparent;
    color: #999;
}

.prompt-btn-dismiss:hover[b-7pwcwiw07y] {
    color: #666;
}
/* /Shared/Components/QLinks/QLinkCreateWizard.razor.rz.scp.css */
.wizard-step-indicator[b-1cxn987tn4] {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    margin-bottom: var(--space-4);
}

.wizard-step[b-1cxn987tn4] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--size-200);
    font-weight: var(--weight-semi);
    border: 2px solid var(--border);
    color: var(--text-muted);
}

.wizard-step.active[b-1cxn987tn4] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--paper);
}

.wizard-step.complete[b-1cxn987tn4] {
    border-color: var(--status-ok);
    color: var(--status-ok);
}

.type-card-grid[b-1cxn987tn4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.type-card[b-1cxn987tn4] {
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: var(--space-4);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s;
}

.type-card:hover[b-1cxn987tn4] {
    border-color: var(--accent);
}

.type-card.selected[b-1cxn987tn4] {
    border-color: var(--accent);
    background: var(--surface-subtle);
}

.type-card .fas[b-1cxn987tn4] {
    font-size: var(--size-400);
    margin-bottom: var(--space-2);
    display: block;
}

.type-card__label[b-1cxn987tn4] {
    font-weight: var(--weight-semi);
    margin-bottom: var(--space-1);
}

.type-card__desc[b-1cxn987tn4] {
    font-size: var(--size-200);
    color: var(--text-muted);
}

.wizard-success[b-1cxn987tn4] {
    text-align: center;
    padding: var(--space-4);
}

.preview-list[b-1cxn987tn4] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-3);
    margin: 0;
}

.preview-list dt[b-1cxn987tn4] {
    font-weight: var(--weight-semi);
    color: var(--text-muted);
    font-size: var(--size-200);
}

.preview-list dd[b-1cxn987tn4] {
    margin: 0;
}

.form-builder-row[b-1cxn987tn4] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-2);
}

.form-builder-required[b-1cxn987tn4] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
    font-size: var(--size-200);
}

.required[b-1cxn987tn4] {
    color: var(--status-error);
}
/* /Shared/Components/QLinks/QLinkScanChart.razor.rz.scp.css */
.scan-chart-wrapper[b-9aii7cwqpo] {
    padding: var(--space-4) 0;
}

.scan-chart-toolbar[b-9aii7cwqpo] {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.date-chip[b-9aii7cwqpo] {
    padding: var(--space-1) 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: transparent;
    cursor: pointer;
    font-size: var(--size-200);
    color: var(--text-secondary);
    transition: background 0.15s, color 0.15s;
}

.date-chip:hover[b-9aii7cwqpo] {
    background: var(--surface-subtle);
}

.date-chip.active[b-9aii7cwqpo] {
    background: var(--accent);
    color: var(--paper);
    border-color: var(--accent);
}
/* /Shared/Components/QLink/QLinkFeedbackView.razor.rz.scp.css */
.feedback-question[b-birqonzv7f] { font-size: var(--size-500); font-weight: var(--weight-semi); color: var(--text-primary); margin-bottom: var(--space-4); }
.rating-widget[b-birqonzv7f] { display: flex; gap: var(--space-4); justify-content: center; margin: var(--space-4) 0; flex-wrap: nowrap; }
.rating-option[b-birqonzv7f] { min-width: 80px; min-height: 64px; border: 1px solid var(--border); border-radius: var(--radius-4); background: var(--surface); font-size: 28px; cursor: pointer; transition: background var(--dur-fast) var(--curve-default), border-color var(--dur-fast) var(--curve-default); display: flex; align-items: center; justify-content: center; }
.rating-option.selected[b-birqonzv7f] { background: var(--accent-soft); border-color: var(--border-strong); }
.rating-star[b-birqonzv7f] { min-width: var(--touch-target-min); min-height: var(--touch-target-min); border: none; background: transparent; font-size: 28px; cursor: pointer; color: var(--border-strong); }
.rating-star.selected[b-birqonzv7f] { color: var(--accent); }
.rating-emoji[b-birqonzv7f] { min-width: 52px; min-height: 52px; border: 1px solid var(--border); border-radius: var(--radius-4); background: var(--surface); font-size: 28px; cursor: pointer; }
.rating-emoji.selected[b-birqonzv7f] { background: var(--accent-soft); border-color: var(--border-strong); }
.comment-section[b-birqonzv7f] { margin-top: var(--space-4); }
.comment-label[b-birqonzv7f] { font-size: var(--size-400); color: var(--text-primary); display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.optional-label[b-birqonzv7f] { font-size: var(--size-300); color: var(--text-muted); }
.comment-textarea[b-birqonzv7f] { border: 1px solid var(--border); border-radius: var(--radius-2); padding: var(--space-3) var(--space-4); font-size: var(--size-400); color: var(--text-primary); background: var(--surface); width: 100%; box-sizing: border-box; min-height: 80px; resize: vertical; }
.submit-button[b-birqonzv7f] { background: var(--accent); color: var(--text-on-accent); border: none; border-radius: var(--radius-2); min-height: var(--density-row-height); width: 100%; font-size: var(--size-500); font-weight: var(--weight-semi); cursor: pointer; margin-top: var(--space-4); transition: background var(--dur-fast) var(--curve-default); }
.submit-button:hover:not(:disabled)[b-birqonzv7f] { background: var(--accent-hover); }
.submit-button:disabled[b-birqonzv7f] { opacity: 0.6; cursor: not-allowed; }
.network-error[b-birqonzv7f] { color: var(--status-err); font-size: var(--size-400); margin-top: var(--space-2); }
.thank-you[b-birqonzv7f] { text-align: center; padding: var(--space-8) var(--space-6); }
.thank-you-heading[b-birqonzv7f] { font-size: var(--size-700); font-weight: var(--weight-semi); color: var(--text-primary); }
/* /Shared/Components/QLink/QLinkFormView.razor.rz.scp.css */
.form-title[b-fcaswai6j0] { font-size: var(--size-700); font-weight: var(--weight-semi); color: var(--text-primary); margin-bottom: var(--space-6); }
.form-row[b-fcaswai6j0] { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-label[b-fcaswai6j0] { font-size: var(--size-400); font-weight: var(--weight-regular); color: var(--text-primary); }
.form-label .optional[b-fcaswai6j0] { font-size: var(--size-300); color: var(--text-muted); margin-left: var(--space-1); }
.form-input[b-fcaswai6j0] { border: 1px solid var(--border); border-radius: var(--radius-2); padding: var(--space-3) var(--space-4); font-size: var(--size-400); color: var(--text-primary); background: var(--surface); width: 100%; box-sizing: border-box; }
.form-input.input-error[b-fcaswai6j0] { border-color: var(--status-err); }
textarea.form-input[b-fcaswai6j0] { min-height: 96px; resize: vertical; }
.field-error[b-fcaswai6j0] { font-size: var(--size-300); color: var(--status-err); margin-top: var(--space-1); }
.required[b-fcaswai6j0] { color: var(--status-err); margin-left: var(--space-1); }
.optional[b-fcaswai6j0] { font-size: var(--size-300); color: var(--text-muted); margin-left: var(--space-1); }
.checkbox-row[b-fcaswai6j0] { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target-min); }
.submit-button[b-fcaswai6j0] { background: var(--accent); color: var(--text-on-accent); border: none; border-radius: var(--radius-2); min-height: var(--density-row-height); width: 100%; font-size: var(--size-500); font-weight: var(--weight-semi); cursor: pointer; transition: background var(--dur-fast) var(--curve-default); margin-top: var(--space-4); }
.submit-button:hover:not(:disabled)[b-fcaswai6j0] { background: var(--accent-hover); }
.submit-button:disabled[b-fcaswai6j0] { opacity: 0.6; cursor: not-allowed; }
.network-error[b-fcaswai6j0] { color: var(--status-err); font-size: var(--size-400); margin-top: var(--space-2); }
.thank-you[b-fcaswai6j0] { text-align: center; padding: var(--space-8) var(--space-6); }
.thank-you-heading[b-fcaswai6j0] { font-size: var(--size-700); font-weight: var(--weight-semi); color: var(--text-primary); margin-bottom: var(--space-4); }
.thank-you-body[b-fcaswai6j0] { font-size: var(--size-500); color: var(--text-body); line-height: 1.55; }
/* /Shared/Components/QLink/QLinkInfoView.razor.rz.scp.css */
.info-title[b-sbp4chvac0] { font-size: var(--size-700); font-weight: var(--weight-semi); color: var(--text-primary); margin-bottom: var(--space-4); }
.info-image[b-sbp4chvac0] { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-3); margin-bottom: var(--space-4); max-height: 240px; }
.info-content[b-sbp4chvac0] { font-size: var(--size-500); line-height: 1.55; color: var(--text-body); margin-bottom: var(--space-6); }
.info-action-button[b-sbp4chvac0] { display: flex; align-items: center; justify-content: center; text-align: center; background: var(--accent); color: var(--text-on-accent); border-radius: var(--radius-2); padding: var(--space-3) var(--space-6); min-height: var(--density-row-height); text-decoration: none; font-size: var(--size-500); font-weight: var(--weight-semi); transition: background var(--dur-fast) var(--curve-default); box-sizing: border-box; }
.info-action-button:hover[b-sbp4chvac0] { background: var(--accent-hover); }
/* /Shared/Components/QLink/QLinkPromoView.razor.rz.scp.css */
.promo-title[b-knl7hd320k] { font-size: var(--size-700); font-weight: var(--weight-semi); color: var(--text-primary); margin-bottom: var(--space-4); }
.promo-image[b-knl7hd320k] { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-3); margin-bottom: var(--space-4); max-height: 240px; }
.promo-discount[b-knl7hd320k] { font-size: var(--size-700); font-weight: var(--weight-semi); color: var(--text-primary); margin: var(--space-2) 0 var(--space-4); }
.promo-description[b-knl7hd320k] { font-size: var(--size-500); color: var(--text-body); line-height: 1.55; margin-bottom: var(--space-4); }
.promo-terms-section[b-knl7hd320k] { border-top: 1px solid var(--divider); margin-top: var(--space-4); padding-top: var(--space-4); }
.promo-terms-text[b-knl7hd320k] { font-size: var(--size-200); color: var(--text-secondary); }
.claim-button[b-knl7hd320k] { background: var(--accent); color: var(--text-on-accent); border: none; border-radius: var(--radius-2); min-height: var(--density-row-height); width: 100%; font-size: var(--size-500); font-weight: var(--weight-semi); cursor: pointer; transition: background var(--dur-fast) var(--curve-default); margin-top: var(--space-4); }
.claim-button:hover:not(:disabled)[b-knl7hd320k] { background: var(--accent-hover); }
.claim-button:disabled[b-knl7hd320k] { opacity: 0.6; cursor: not-allowed; }
.network-error[b-knl7hd320k] { color: var(--status-err); font-size: var(--size-400); margin-top: var(--space-2); }
.thank-you[b-knl7hd320k] { text-align: center; padding: var(--space-8) var(--space-6); }
.thank-you-heading[b-knl7hd320k] { font-size: var(--size-700); font-weight: var(--weight-semi); color: var(--text-primary); margin-bottom: var(--space-4); }
.thank-you-body[b-knl7hd320k] { font-size: var(--size-500); color: var(--text-body); line-height: 1.55; }
/* /Shared/Components/Queue/QueueCard.razor.rz.scp.css */

.Grid-wrapper[b-22opotrhxl] {
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(1, 1fr);
    margin-bottom: 15px;
    margin-left: 10px;
    margin-right: 10px;
}

.Grid-left[b-22opotrhxl] {
    text-align: left;
    grid-column: 1/1;
    padding: 0 2px;
}
/* /Shared/Components/SocialMedia/ConnectionsModal.razor.rz.scp.css */
/* ConnectionsModal scoped CSS — moved from SocialMedia.razor.css L71-173 in Phase 159-01 Task 3.
   Shared modal shell + .page-item shape live in global Client/wwwroot/css/social-media.css. */

.connections-modal[b-4frcwp54c0] {
    max-width: 520px;
}

.connections-modal-list[b-4frcwp54c0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.connection-row[b-4frcwp54c0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.connection-row-left[b-4frcwp54c0] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.connection-row-right[b-4frcwp54c0] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.connection-icon.tiktok[b-4frcwp54c0] {
    color: #000;
}

.connection-icon.google[b-4frcwp54c0] {
    color: #4285F4;
}

.btn-connect[b-4frcwp54c0] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    color: #fff;
    transition: all 0.2s;
}

.btn-connect.facebook[b-4frcwp54c0] {
    background: #4267B2;
}

.btn-connect.facebook:hover[b-4frcwp54c0] {
    background: #365899;
}

.btn-connect.instagram[b-4frcwp54c0] {
    background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
}

.btn-connect.instagram:hover[b-4frcwp54c0] {
    opacity: 0.9;
}

.btn-connect.tiktok[b-4frcwp54c0] {
    background: #010101;
}

.btn-connect.tiktok:hover[b-4frcwp54c0] {
    background: #333;
}

.btn-connect.google[b-4frcwp54c0] {
    background: #4285F4;
}

.btn-connect.google:hover[b-4frcwp54c0] {
    background: #3367d6;
}

.btn-disabled[b-4frcwp54c0] {
    padding: 6px 12px;
    background: #e0e0e0;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    color: #999;
    cursor: not-allowed;
}

.connection-hint-text[b-4frcwp54c0] {
    font-size: 11px;
    color: #666;
}

.connection-hint-text i[b-4frcwp54c0] {
    color: #f57f17;
    margin-right: 4px;
}
/* /Shared/Components/SocialMedia/EngagementDashboard.razor.rz.scp.css */
/* Phase 163 — EngagementDashboard component-scoped styles. */
/* Cross-component tokens (--platform-*) live in Client/wwwroot/css/social-media.css. */

.engagement-dashboard[b-y4t1o3ud1p] {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px 16px;
}

.engagement-header h2[b-y4t1o3ud1p] {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.engagement-toolbar[b-y4t1o3ud1p] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
}

.engagement-kpi-grid[b-y4t1o3ud1p] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.engagement-kpi-card[b-y4t1o3ud1p] {
    position: relative;
    min-height: 96px;
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    padding: 14px 16px;
}

.engagement-kpi-value[b-y4t1o3ud1p] {
    color: var(--text-primary);
    font-size: var(--size-600);
    font-weight: var(--weight-bold);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    padding-right: 56px;
}

.engagement-kpi-label[b-y4t1o3ud1p] {
    color: var(--text-secondary);
    font-size: var(--size-200);
    font-weight: var(--weight-medium);
    margin-top: 8px;
}

.engagement-kpi-delta[b-y4t1o3ud1p] {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: var(--size-200);
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
}

.engagement-kpi-delta.is-up[b-y4t1o3ud1p] {
    color: var(--status-ok);
}

.engagement-kpi-delta.is-down[b-y4t1o3ud1p] {
    color: var(--status-err);
}

.engagement-kpi-delta .oi[b-y4t1o3ud1p] {
    font-size: 10px;
}

/* Metric selector — desktop button group (matches kpi-toggle-group pattern). */
.engagement-metric-selector-buttons[b-y4t1o3ud1p] {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 6px;
    padding: 2px;
    gap: 0;
}

.engagement-metric-selector-buttons .kpi-toggle-btn[b-y4t1o3ud1p] {
    background: transparent;
    border: none;
    padding: 4px 12px;
    font-size: 0.78rem;
    color: #64748b;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.engagement-metric-selector-buttons .kpi-toggle-btn:hover[b-y4t1o3ud1p] {
    color: #334155;
}

.engagement-metric-selector-buttons .kpi-toggle-btn.active[b-y4t1o3ud1p] {
    background: #ffffff;
    color: #1e293b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.engagement-metric-selector-buttons .kpi-toggle-btn:focus-visible[b-y4t1o3ud1p] {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

/* Mobile dropdown — hidden by default; shown below 600px. */
.engagement-metric-selector-dropdown[b-y4t1o3ud1p] {
    display: none;
    padding: 6px 10px;
    font-size: 14px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #ffffff;
    color: #1e293b;
}

/* Date range chips. */
.engagement-date-range[b-y4t1o3ud1p] {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.engagement-date-range .date-chip[b-y4t1o3ud1p] {
    background: #f1f5f9;
    border: 1px solid #e0e0e0;
    color: #64748b;
    height: 32px;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.15s ease;
}

.engagement-date-range .date-chip:hover[b-y4t1o3ud1p] {
    background: #e2e8f0;
    color: #334155;
    border-color: #cbd5e1;
}

.engagement-date-range .date-chip.active[b-y4t1o3ud1p] {
    background: #1976d2;
    color: #ffffff;
    border-color: #1976d2;
}

.engagement-date-range .date-chip:focus-visible[b-y4t1o3ud1p] {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

.engagement-date-custom-row[b-y4t1o3ud1p] {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.engagement-date-custom-row label[b-y4t1o3ud1p] {
    font-size: 12px;
    color: #64748b;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Chart area — relative positioning so overlay can sit absolutely. */
.engagement-chart-area[b-y4t1o3ud1p] {
    position: relative;
    margin-top: 16px;
    min-height: 300px;
}

.engagement-loading-overlay[b-y4t1o3ud1p] {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.loading-spinner-icon[b-y4t1o3ud1p] {
    font-size: 32px;
    color: #1976d2;
    animation: spin-b-y4t1o3ud1p 1s linear infinite;
}

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

/* Empty + error states. */
.engagement-empty[b-y4t1o3ud1p],
.engagement-error[b-y4t1o3ud1p] {
    position: absolute;
    inset: 0;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 32px 24px;
    text-align: center;
    z-index: 5;
}

.engagement-empty .oi[b-y4t1o3ud1p] {
    font-size: 40px;
    color: #94a3b8;
}

.engagement-error .oi[b-y4t1o3ud1p] {
    font-size: 40px;
    color: #dc2626;
}

.engagement-empty h3[b-y4t1o3ud1p],
.engagement-error h3[b-y4t1o3ud1p] {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 16px 0 8px;
}

.engagement-empty p[b-y4t1o3ud1p],
.engagement-error p[b-y4t1o3ud1p] {
    font-size: 13px;
    color: #64748b;
    max-width: 320px;
    line-height: 1.5;
    margin: 0;
}

.engagement-retry[b-y4t1o3ud1p] {
    background: #1976d2;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 16px;
}

.engagement-retry:hover[b-y4t1o3ud1p] { background: #1565c0; }
.engagement-retry:focus-visible[b-y4t1o3ud1p] { outline: 2px solid #1976d2; outline-offset: 2px; }

/* Responsive — mobile breakpoint. */
@media (max-width: 599px) {
    .engagement-toolbar[b-y4t1o3ud1p] { flex-direction: column; align-items: stretch; gap: 8px; }
    .engagement-kpi-grid[b-y4t1o3ud1p] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .engagement-metric-selector-buttons[b-y4t1o3ud1p] { display: none; }
    .engagement-metric-selector-dropdown[b-y4t1o3ud1p] { display: block; }
    .engagement-chart-area[b-y4t1o3ud1p] { min-height: 220px; }
}

@media (min-width: 600px) {
    .engagement-metric-selector-dropdown[b-y4t1o3ud1p] { display: none; }
}
/* /Shared/Components/SocialMedia/GbpLocationModal.razor.rz.scp.css */
/* GbpLocationModal scoped CSS — shared shell + page-item shape live in global social-media.css. */
/* /Shared/Components/SocialMedia/GoogleBusinessCard.razor.rz.scp.css */
.gbp-card[b-afckqr8cfi] {
    padding: 1.5rem;
}

/* Loading State */
.gbp-loading[b-afckqr8cfi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #6b7280;
    padding: 1rem 0;
}

/* Error State */
.gbp-error-state[b-afckqr8cfi] {
    padding: 0.5rem 0;
}

.gbp-error-header[b-afckqr8cfi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.gbp-error-header h3[b-afckqr8cfi] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #111827;
}

.gbp-error-body[b-afckqr8cfi] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gbp-error-body > i[b-afckqr8cfi] {
    color: #ef4444;
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.gbp-error-title[b-afckqr8cfi] {
    font-weight: 600;
    color: #991b1b;
    margin: 0;
    font-size: 0.9rem;
}

.gbp-error-message[b-afckqr8cfi] {
    color: #6b7280;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Section Layout */
.gbp-section[b-afckqr8cfi] {
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #f3f4f6;
}

.gbp-section:last-child[b-afckqr8cfi] {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

/* Profile Snapshot */
.gbp-section-header[b-afckqr8cfi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.gbp-section-header h3[b-afckqr8cfi] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #111827;
    flex: 1;
}

.gbp-icon[b-afckqr8cfi] {
    color: #4285F4;
    font-size: 1.2rem;
}

/* Open Status Badge */
.open-status-badge[b-afckqr8cfi] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.open-status-badge.open[b-afckqr8cfi] {
    background: #d1fae5;
    color: #065f46;
}

.open-status-badge.closed[b-afckqr8cfi] {
    background: #fee2e2;
    color: #991b1b;
}

.open-status-badge.closed-permanently[b-afckqr8cfi] {
    background: #f3f4f6;
    color: #374151;
}

/* Profile Details */
.profile-details[b-afckqr8cfi] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.profile-detail-row[b-afckqr8cfi] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: #374151;
}

.detail-icon[b-afckqr8cfi] {
    color: #9ca3af;
    width: 1rem;
    text-align: center;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

/* Categories */
.category-group[b-afckqr8cfi] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.category-badge[b-afckqr8cfi] {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-weight: 500;
}

.category-badge.primary[b-afckqr8cfi] {
    background: #dbeafe;
    color: #1d4ed8;
}

.category-badge.secondary[b-afckqr8cfi] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Description */
.profile-description[b-afckqr8cfi] {
    background: #f9fafb;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.5;
}

.profile-description p[b-afckqr8cfi] {
    margin: 0;
}

.profile-description.empty p[b-afckqr8cfi] {
    color: #9ca3af;
    font-style: italic;
}

/* Opening Hours */
.hours-section[b-afckqr8cfi] {
    margin-top: 0.75rem;
}

.hours-heading[b-afckqr8cfi] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hours-table[b-afckqr8cfi] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.hours-table tr:not(:last-child) td[b-afckqr8cfi] {
    padding-bottom: 0.3rem;
}

.hours-day[b-afckqr8cfi] {
    width: 110px;
    color: #6b7280;
    font-weight: 500;
}

.hours-time[b-afckqr8cfi] {
    color: #111827;
}

/* Audit Panel */
.audit-panel-section[b-afckqr8cfi] {
}

.audit-heading[b-afckqr8cfi] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.audit-rows[b-afckqr8cfi] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.audit-row[b-afckqr8cfi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0;
}

.audit-label[b-afckqr8cfi] {
    font-size: 0.875rem;
    color: #374151;
    font-weight: 500;
}

.audit-indicator[b-afckqr8cfi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Audit Dot Indicators */
.audit-dot[b-afckqr8cfi] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.audit-dot.green[b-afckqr8cfi] {
    background-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.audit-dot.amber[b-afckqr8cfi] {
    background-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.audit-dot.red[b-afckqr8cfi] {
    background-color: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.audit-status-text[b-afckqr8cfi] {
    font-size: 0.8rem;
    color: #6b7280;
    min-width: 80px;
    text-align: right;
}

/* Audit Unavailable */
.audit-unavailable-text[b-afckqr8cfi] {
    font-size: 0.875rem;
    color: #9ca3af;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Description Improvement Section */
.description-improvement-section[b-afckqr8cfi] {
}

.description-improvement-header[b-afckqr8cfi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.description-improvement-heading[b-afckqr8cfi] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.btn-generate-draft[b-afckqr8cfi] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #4285F4;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.btn-generate-draft:hover:not(:disabled)[b-afckqr8cfi] {
    background: #dbeafe;
    border-color: #93c5fd;
}

.btn-generate-draft:disabled[b-afckqr8cfi],
.btn-generate-draft.loading[b-afckqr8cfi] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Draft Result */
.draft-result[b-afckqr8cfi] {
    margin-top: 0.85rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 0.9rem 1rem;
}

.draft-text[b-afckqr8cfi] {
    font-size: 0.875rem;
    color: #166534;
    line-height: 1.55;
    margin-bottom: 0.6rem;
}

.draft-text p[b-afckqr8cfi] {
    margin: 0;
}

.draft-meta[b-afckqr8cfi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.draft-char-count[b-afckqr8cfi] {
    font-size: 0.75rem;
    color: #6b7280;
    font-style: italic;
}

.btn-dismiss-draft[b-afckqr8cfi] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-dismiss-draft:hover[b-afckqr8cfi] {
    background: #f3f4f6;
    color: #374151;
}

/* Draft Error */
.draft-error[b-afckqr8cfi] {
    margin-top: 0.85rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: #991b1b;
}

.draft-error i[b-afckqr8cfi] {
    color: #ef4444;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* Reviews Section */
.reviews-section[b-afckqr8cfi] {
}

.reviews-header[b-afckqr8cfi] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.reviews-heading[b-afckqr8cfi] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.unresponded-badge[b-afckqr8cfi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: #ef4444;
    border-radius: 10px;
}

.reviews-loading[b-afckqr8cfi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
    padding: 0.5rem 0;
}

.reviews-unavailable-text[b-afckqr8cfi] {
    font-size: 0.875rem;
    color: #9ca3af;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.no-reviews-text[b-afckqr8cfi] {
    font-size: 0.875rem;
    color: #9ca3af;
    margin: 0;
}

/* Reviews Summary */
.reviews-summary[b-afckqr8cfi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    padding: 0.5rem 0.75rem;
    background: #f9fafb;
    border-radius: 6px;
}

.average-rating[b-afckqr8cfi] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
}

.star-display[b-afckqr8cfi] {
    display: flex;
    gap: 2px;
}

.star-display .filled[b-afckqr8cfi] {
    color: #f59e0b;
    font-size: 0.85rem;
}

.star-display .empty[b-afckqr8cfi] {
    color: #d1d5db;
    font-size: 0.85rem;
}

.total-count[b-afckqr8cfi] {
    font-size: 0.8rem;
    color: #6b7280;
}

/* Review List */
.reviews-list[b-afckqr8cfi] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.review-item[b-afckqr8cfi] {
    border: 1px solid #f3f4f6;
    border-radius: 8px;
    padding: 0.85rem 1rem;
}

.review-header[b-afckqr8cfi] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.reviewer-info[b-afckqr8cfi] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.reviewer-name[b-afckqr8cfi] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #111827;
}

.review-date[b-afckqr8cfi] {
    font-size: 0.75rem;
    color: #9ca3af;
}

.review-stars[b-afckqr8cfi] {
    display: flex;
    gap: 1px;
    flex-shrink: 0;
}

.review-stars .filled[b-afckqr8cfi] {
    color: #f59e0b;
    font-size: 0.75rem;
}

.review-stars .empty[b-afckqr8cfi] {
    color: #d1d5db;
    font-size: 0.75rem;
}

.review-comment[b-afckqr8cfi] {
    font-size: 0.85rem;
    color: #374151;
    line-height: 1.45;
    margin: 0.3rem 0 0.5rem 0;
}

/* Existing Reply */
.existing-reply[b-afckqr8cfi] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    margin-top: 0.4rem;
}

.existing-reply-header[b-afckqr8cfi] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #166534;
    margin-bottom: 0.3rem;
}

.existing-reply-header i[b-afckqr8cfi] {
    font-size: 0.7rem;
}

.reply-date[b-afckqr8cfi] {
    color: #6b7280;
    font-weight: 400;
    margin-left: auto;
}

.existing-reply-text[b-afckqr8cfi] {
    font-size: 0.825rem;
    color: #166534;
    line-height: 1.4;
    margin: 0;
}

/* Reply Button */
.btn-open-reply[b-afckqr8cfi] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: #4285F4;
    background: transparent;
    border: 1px solid #bfdbfe;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin-top: 0.35rem;
}

.btn-open-reply:hover[b-afckqr8cfi] {
    background: #eff6ff;
    border-color: #93c5fd;
}

/* Reply Form */
.reply-form[b-afckqr8cfi] {
    margin-top: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem;
    background: #fafafa;
}

.reply-textarea[b-afckqr8cfi] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0.5rem 0.65rem;
    font-size: 0.85rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    resize: vertical;
    min-height: 60px;
    box-sizing: border-box;
}

.reply-textarea:focus[b-afckqr8cfi] {
    outline: none;
    border-color: #4285F4;
    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.15);
}

.reply-textarea:disabled[b-afckqr8cfi] {
    background: #f3f4f6;
    color: #9ca3af;
}

.reply-form-actions[b-afckqr8cfi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.reply-form-left[b-afckqr8cfi] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.reply-form-right[b-afckqr8cfi] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.reply-char-count[b-afckqr8cfi] {
    font-size: 0.72rem;
    color: #9ca3af;
}

/* AI Draft Button */
.btn-ai-draft[b-afckqr8cfi] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: #7c3aed;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.btn-ai-draft:hover:not(:disabled)[b-afckqr8cfi] {
    background: #ede9fe;
    border-color: #c4b5fd;
}

.btn-ai-draft:disabled[b-afckqr8cfi],
.btn-ai-draft.loading[b-afckqr8cfi] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Cancel Button */
.btn-cancel-reply[b-afckqr8cfi] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-cancel-reply:hover:not(:disabled)[b-afckqr8cfi] {
    background: #f3f4f6;
}

.btn-cancel-reply:disabled[b-afckqr8cfi] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Post Reply Button */
.btn-post-reply[b-afckqr8cfi] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    background: #4285F4;
    border: 1px solid #4285F4;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.btn-post-reply:hover:not(:disabled)[b-afckqr8cfi] {
    background: #3b78e7;
}

.btn-post-reply:disabled[b-afckqr8cfi] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-post-reply.loading[b-afckqr8cfi] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Reply Error */
.reply-error[b-afckqr8cfi] {
    margin-top: 0.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: #991b1b;
}

.reply-error i[b-afckqr8cfi] {
    color: #ef4444;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* Google Posts Panel */
.post-panel-section[b-afckqr8cfi] {
}

.post-panel-header[b-afckqr8cfi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.post-panel-heading[b-afckqr8cfi] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.btn-toggle-post-panel[b-afckqr8cfi] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: #4285F4;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.btn-toggle-post-panel:hover[b-afckqr8cfi] {
    background: #dbeafe;
    border-color: #93c5fd;
}

.post-panel-body[b-afckqr8cfi] {
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.post-textarea[b-afckqr8cfi] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    resize: vertical;
    min-height: 100px;
    box-sizing: border-box;
    line-height: 1.5;
}

.post-textarea:focus[b-afckqr8cfi] {
    outline: none;
    border-color: #4285F4;
    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.15);
}

.post-textarea:disabled[b-afckqr8cfi] {
    background: #f3f4f6;
    color: #9ca3af;
}

.post-char-counter[b-afckqr8cfi] {
    font-size: 0.72rem;
    text-align: right;
    margin-top: -0.25rem;
}

.char-count-normal[b-afckqr8cfi] {
    color: #9ca3af;
}

.char-count-warning[b-afckqr8cfi] {
    color: #d97706;
    font-weight: 600;
}

.char-count-danger[b-afckqr8cfi] {
    color: #dc2626;
    font-weight: 700;
}

.post-image-label[b-afckqr8cfi] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: -0.25rem;
}

.post-image-url[b-afckqr8cfi] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0.45rem 0.65rem;
    font-size: 0.85rem;
    font-family: inherit;
    color: #374151;
    background: #fff;
    box-sizing: border-box;
}

.post-image-url:focus[b-afckqr8cfi] {
    outline: none;
    border-color: #4285F4;
    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.15);
}

.post-image-url:disabled[b-afckqr8cfi] {
    background: #f3f4f6;
    color: #9ca3af;
}

.post-panel-actions[b-afckqr8cfi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.btn-ai-post-draft[b-afckqr8cfi] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #7c3aed;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.btn-ai-post-draft:hover:not(:disabled)[b-afckqr8cfi] {
    background: #ede9fe;
    border-color: #c4b5fd;
}

.btn-ai-post-draft:disabled[b-afckqr8cfi],
.btn-ai-post-draft.loading[b-afckqr8cfi] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-publish-post[b-afckqr8cfi] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: #4285F4;
    border: 1px solid #4285F4;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.btn-publish-post:hover:not(:disabled)[b-afckqr8cfi] {
    background: #3b78e7;
    border-color: #3b78e7;
}

.btn-publish-post:disabled[b-afckqr8cfi],
.btn-publish-post.loading[b-afckqr8cfi] {
    opacity: 0.6;
    cursor: not-allowed;
}

.post-success[b-afckqr8cfi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
    color: #166534;
    margin-top: 0.25rem;
}

.post-success i[b-afckqr8cfi] {
    color: #16a34a;
    flex-shrink: 0;
}

.post-error[b-afckqr8cfi] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
    color: #991b1b;
    margin-top: 0.25rem;
}

.post-error i[b-afckqr8cfi] {
    color: #ef4444;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
/* /Shared/Components/SocialMedia/ImageOverlayEditor.razor.rz.scp.css */
.overlay-editor[b-162do9oce5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.canvas-container[b-162do9oce5] {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
}

.canvas-container canvas[b-162do9oce5] {
    display: block;
    width: 100%;
    height: auto;
}

.overlay-controls[b-162do9oce5] {
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
}

.no-overlays[b-162do9oce5] {
    text-align: center;
    padding: 30px 20px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 2px dashed #e0e0e0;
}

.no-overlays p[b-162do9oce5] {
    color: #666;
    margin: 0 0 16px 0;
    font-size: 14px;
}

.btn-add-overlay[b-162do9oce5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #1976d2;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-add-overlay:hover[b-162do9oce5] {
    background: #1565c0;
}

.overlay-item[b-162do9oce5] {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.overlay-item.active[b-162do9oce5] {
    border-color: #1976d2;
    box-shadow: 0 0 0 1px #1976d2;
}

.overlay-item-header[b-162do9oce5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: #fafafa;
    cursor: pointer;
}

.overlay-preview-text[b-162do9oce5] {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.btn-delete-overlay[b-162do9oce5] {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-delete-overlay:hover[b-162do9oce5] {
    background: #ffebee;
    color: #d32f2f;
}

.overlay-item-controls[b-162do9oce5] {
    padding: 14px;
    border-top: 1px solid #e0e0e0;
}

.control-group[b-162do9oce5] {
    margin-bottom: 14px;
}

.control-group label[b-162do9oce5] {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.control-group.half[b-162do9oce5] {
    flex: 1;
}

.control-row[b-162do9oce5] {
    display: flex;
    gap: 12px;
}

.text-input[b-162do9oce5] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.text-input:focus[b-162do9oce5] {
    outline: none;
    border-color: #1976d2;
}

/* Position Grid */
.position-grid[b-162do9oce5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    max-width: 150px;
}

.position-grid .pos-btn:nth-child(4)[b-162do9oce5] {
    grid-column: 1 / 4;
    max-width: calc(33.33% - 4px);
    margin: 0 auto;
}

.pos-btn[b-162do9oce5] {
    width: 40px;
    height: 40px;
    border: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    transition: all 0.2s;
}

.pos-btn:hover[b-162do9oce5] {
    border-color: #1976d2;
    color: #1976d2;
}

.pos-btn.active[b-162do9oce5] {
    background: #1976d2;
    border-color: #1976d2;
    color: #fff;
}

/* Range Input */
input[type="range"][b-162do9oce5] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #e0e0e0;
    outline: none;
    -webkit-appearance: none;
}

input[type="range"][b-162do9oce5]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1976d2;
    cursor: pointer;
}

.range-value[b-162do9oce5] {
    display: inline-block;
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

/* Color Input */
input[type="color"][b-162do9oce5] {
    width: 100%;
    height: 36px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    padding: 2px;
}

/* Select */
select[b-162do9oce5] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
}

select:focus[b-162do9oce5] {
    outline: none;
    border-color: #1976d2;
}

/* Add More Button */
.btn-add-more[b-162do9oce5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    background: #f5f5f5;
    border: 1px dashed #ccc;
    border-radius: 6px;
    color: #666;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 16px;
}

.btn-add-more:hover[b-162do9oce5] {
    border-color: #1976d2;
    color: #1976d2;
    background: #e3f2fd;
}

/* Preset Templates */
.preset-templates[b-162do9oce5] {
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.preset-templates label[b-162do9oce5] {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.preset-buttons[b-162do9oce5] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.preset-btn[b-162do9oce5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
}

.preset-btn:hover[b-162do9oce5] {
    border-color: #1976d2;
    color: #1976d2;
    background: #e3f2fd;
}

.preset-btn i[b-162do9oce5] {
    font-size: 11px;
}

/* Responsive - already column layout, no changes needed */
/* /Shared/Components/SocialMedia/PageSelectionModal.razor.rz.scp.css */
/* PageSelectionModal scoped CSS — shared shell + page-item shape live in global social-media.css. */
/* /Shared/Components/SocialMedia/PostComposer.razor.rz.scp.css */
/* === PostComposer scoped CSS (Phase 161-01) — moved byte-identical from SocialMedia.razor.css === */

.create-post-card[b-27zfdeu9b8] {
    border-top: 3px solid var(--interactive);
}

.loading-step[b-27zfdeu9b8] {
    font-size: 13px;
    color: var(--interactive);
    font-weight: 500;
    margin-bottom: 16px;
    min-height: 20px;
}

.loading-hint[b-27zfdeu9b8] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* === AI Ideas Grid - Dynamic === */
.ideas-container[b-27zfdeu9b8] {
    padding: 24px;
}

.ideas-header[b-27zfdeu9b8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
}

.ideas-title[b-27zfdeu9b8] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
}

.refresh-ideas-btn[b-27zfdeu9b8] {
    padding: 8px 12px;
    min-width: 40px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    background: var(--surface);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.refresh-ideas-btn:hover:not(:disabled)[b-27zfdeu9b8] {
    border-color: var(--interactive);
    color: var(--interactive);
    background: var(--surface-subtle);
}

.refresh-ideas-btn:disabled[b-27zfdeu9b8] {
    opacity: 0.6;
    cursor: not-allowed;
}

.ideas-grid[b-27zfdeu9b8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.idea-card[b-27zfdeu9b8] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.idea-card:hover[b-27zfdeu9b8] {
    border-color: var(--interactive);
    box-shadow: 0 4px 16px rgba(25, 118, 210, 0.15);
    transform: translateY(-2px);
}

.idea-icon[b-27zfdeu9b8] {
    font-size: 32px;
    margin-bottom: 4px;
}

.idea-title[b-27zfdeu9b8] {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.idea-description[b-27zfdeu9b8] {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.idea-timing[b-27zfdeu9b8] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    margin-top: 4px;
}

.idea-timing.timing-now[b-27zfdeu9b8] {
    background: var(--surface-subtle);
    color: var(--status-ok);
}

.idea-timing.timing-scheduled[b-27zfdeu9b8] {
    background: var(--surface-subtle);
    color: var(--status-info);
}

.no-ideas[b-27zfdeu9b8] {
    padding: 40px 24px;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
}

.no-ideas.error[b-27zfdeu9b8] {
    color: var(--status-err);
    background: var(--surface-subtle);
    border-radius: 8px;
    margin: 0 0 20px 0;
}

.no-ideas.error p[b-27zfdeu9b8] {
    margin-bottom: 12px;
}

.no-ideas a[b-27zfdeu9b8] {
    color: var(--interactive);
    text-decoration: none;
}

.no-ideas a:hover[b-27zfdeu9b8] {
    text-decoration: underline;
}

/* Accordion for custom input */
.custom-idea-accordion[b-27zfdeu9b8] {
    border-top: 1px solid var(--border);
    padding-top: 16px;
    margin-top: 8px;
}

.accordion-toggle[b-27zfdeu9b8] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    padding: 8px 16px;
    width: 100%;
    text-align: center;
}

.accordion-toggle:hover[b-27zfdeu9b8] {
    color: var(--interactive);
}

.custom-idea-content[b-27zfdeu9b8] {
    margin-top: 16px;
    padding: 0 16px;
    animation: slideDown-b-27zfdeu9b8 0.2s ease;
}

@keyframes slideDown-b-27zfdeu9b8 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Shared/Components/SocialMedia/PostEditor.razor.rz.scp.css */
.post-editor[b-a49zn9lt93] {
    max-width: 900px;
    margin: 20px auto;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid #e0e0e0;
    overflow: hidden;
}

.post-editor-header[b-a49zn9lt93] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #e0e0e0;
    background: #f5f5f5;
}

.post-editor-header h2[b-a49zn9lt93] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.close-btn[b-a49zn9lt93] {
    background: none;
    border: none;
    color: #666;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.2s;
}

.close-btn:hover[b-a49zn9lt93] {
    background: #e0e0e0;
    color: #333;
}

.post-editor-content[b-a49zn9lt93] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
}

/* Image Section Row - horizontal layout with image and right panel */
.image-section-row[b-a49zn9lt93] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 20px;
    align-items: flex-start;
}

/* Right panel containing label, caption, and toolbar */
.image-right-panel[b-a49zn9lt93] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 280px;
}

/* Inline caption section */
.caption-inline[b-a49zn9lt93] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.caption-inline label[b-a49zn9lt93] {
    font-weight: 500;
    font-size: 12px;
    color: #666;
}

.caption-inline .caption-editor[b-a49zn9lt93] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    color: #333;
}

.caption-inline .hashtags-editor[b-a49zn9lt93] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    color: #333;
}

/* Separator between Feed and Story */
.image-section-separator[b-a49zn9lt93] {
    height: 2px;
    background: linear-gradient(to right, transparent, #e0e0e0, transparent);
    margin: 8px 0;
}

.image-section[b-a49zn9lt93] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Image Preview Containers */
.image-preview-container[b-a49zn9lt93] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    width: 300px;
    max-width: 300px;
}

/* Wrapper for image and overlay icon */
.image-wrapper[b-a49zn9lt93] {
    position: relative !important;
    display: block;
    width: 300px;
    height: auto;
    min-height: 300px;
    overflow: visible;
}

/* Story wrapper needs taller container for 9:16 aspect */
.story-preview .image-wrapper[b-a49zn9lt93] {
    height: auto;
    min-height: auto;
}

.image-wrapper > .image-prompt-info[b-a49zn9lt93] {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
}

.image-preview-label[b-a49zn9lt93] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 12px;
    background: #f0f4f8;
    border-radius: 4px;
    margin-bottom: 8px;
}

.image-preview-label i[b-a49zn9lt93] {
    font-size: 14px;
    color: #1976d2;
}

.platform-hint[b-a49zn9lt93] {
    font-size: 10px;
    font-weight: 400;
    color: #888;
    text-transform: none;
    margin-left: auto;
}

/* Feed Image (1:1 square) */
.feed-image[b-a49zn9lt93] {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

/* Story Preview Container */
.story-preview[b-a49zn9lt93] {
    /* No extra styling needed - separator is handled by .image-section-separator */
}

/* Story Image (9:16 vertical) - scaled down */
.story-image-fix[b-a49zn9lt93] {
    width: 100%;
    aspect-ratio: 9/16;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Image Toolbar - Light theme matching idea cards */
.image-toolbar[b-a49zn9lt93] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Horizontal toolbar on right side of images */
.image-toolbar-vertical[b-a49zn9lt93] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

/* Image type label at top of toolbar */
.image-type-label[b-a49zn9lt93] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    margin-bottom: 4px;
}

.image-type-title[b-a49zn9lt93] {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.image-type-label .platform-hint[b-a49zn9lt93] {
    font-size: 11px;
    color: #666;
    margin-left: 0;
}

.toolbar-btn[b-a49zn9lt93] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    color: #555;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.toolbar-btn:hover[b-a49zn9lt93] {
    border-color: #1976d2;
    color: #1976d2;
    background: #f5f9ff;
}

.toolbar-btn.active[b-a49zn9lt93] {
    background: #1976d2;
    border-color: #1976d2;
    color: #fff;
}

.toolbar-btn i[b-a49zn9lt93] {
    font-size: 13px;
}

/* Overlay controls section - now in right panel */
.overlay-controls-section[b-a49zn9lt93] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

/* Done button in overlay editor */
.done-btn[b-a49zn9lt93] {
    background: #2e7d32 !important;
    border-color: #2e7d32 !important;
    color: #fff !important;
    margin-top: 8px;
}

.done-btn:hover[b-a49zn9lt93] {
    background: #1b5e20 !important;
    border-color: #1b5e20 !important;
}

/* Base post image style - specific sizes in feed-image and story-image */
.post-image[b-a49zn9lt93] {
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

/* Feed image must be fixed 300x300 square */
.post-image.feed-image[b-a49zn9lt93] {
    width: 300px !important;
    height: 300px !important;
    flex-shrink: 0;
}

.image-actions[b-a49zn9lt93] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.action-btn[b-a49zn9lt93] {
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    text-align: center;
    font-weight: 500;
    color: #666;
}

.action-btn:hover[b-a49zn9lt93] {
    background: #f5f5f5;
    border-color: #1976d2;
    color: #1976d2;
}

.action-btn i[b-a49zn9lt93] {
    margin-right: 6px;
}

.upload-btn[b-a49zn9lt93] {
    position: relative;
    display: block;
}

.hidden-file-input[b-a49zn9lt93] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: pointer;
}

.caption-section[b-a49zn9lt93] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.caption-section label[b-a49zn9lt93] {
    font-weight: 500;
    font-size: 12px;
    color: #666;
    margin-bottom: -4px;
}

.caption-editor[b-a49zn9lt93],
.hashtags-editor[b-a49zn9lt93] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    color: #333;
}

.caption-editor:focus[b-a49zn9lt93],
.hashtags-editor:focus[b-a49zn9lt93] {
    outline: none;
    border-color: #1976d2;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
}

.update-btn[b-a49zn9lt93] {
    padding: 8px 16px;
    background: #1976d2;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    transition: background 0.2s;
}

.update-btn:hover[b-a49zn9lt93] {
    background: #1565c0;
}

.update-btn i[b-a49zn9lt93] {
    margin-right: 6px;
}


.confidence-indicator[b-a49zn9lt93] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.confidence-label[b-a49zn9lt93] {
    font-weight: 500;
    font-size: 13px;
    color: #666;
}

.confidence-badge[b-a49zn9lt93] {
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 12px;
}

.confidence-high[b-a49zn9lt93] {
    background: #e8f5e9;
    color: #2e7d32;
}

.confidence-medium[b-a49zn9lt93] {
    background: #fff8e1;
    color: #f57f17;
}

.confidence-low[b-a49zn9lt93] {
    background: #ffebee;
    color: #c62828;
}

.post-editor-footer[b-a49zn9lt93] {
    display: flex;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    background: #fafafa;
}

.btn-cancel[b-a49zn9lt93] {
    padding: 10px 24px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    color: #666;
    transition: all 0.2s;
}

.btn-cancel:hover[b-a49zn9lt93] {
    background: #f5f5f5;
    color: #d32f2f;
}

.btn-cancel i[b-a49zn9lt93] {
    margin-right: 6px;
}

.btn-approve[b-a49zn9lt93] {
    padding: 10px 32px;
    background: #1976d2;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-approve:hover[b-a49zn9lt93] {
    background: #1565c0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-approve i[b-a49zn9lt93] {
    margin-right: 6px;
}

/* === Scheduling Section === */
.scheduling-section[b-a49zn9lt93] {
    grid-column: 1 / -1;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.scheduling-toggle[b-a49zn9lt93] {
    display: flex;
    gap: 0;
    margin-bottom: 0;
}

.toggle-btn[b-a49zn9lt93] {
    flex: 1;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    transition: all 0.2s;
}

.toggle-btn:first-child[b-a49zn9lt93] {
    border-radius: 4px 0 0 4px;
    border-right: none;
}

.toggle-btn:last-child[b-a49zn9lt93] {
    border-radius: 0 4px 4px 0;
}

.toggle-btn:hover[b-a49zn9lt93] {
    background: #f5f5f5;
}

.toggle-btn.active[b-a49zn9lt93] {
    background: #1976d2;
    border-color: #1976d2;
    color: #fff;
}

.toggle-btn i[b-a49zn9lt93] {
    margin-right: 6px;
}

.schedule-picker[b-a49zn9lt93] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.schedule-inputs[b-a49zn9lt93] {
    display: flex;
    gap: 16px;
}

.schedule-field[b-a49zn9lt93] {
    flex: 1;
}

.schedule-field label[b-a49zn9lt93] {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    margin-bottom: 6px;
}

.schedule-field input[b-a49zn9lt93] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    color: #333;
    background: #fff;
}

.schedule-field input:focus[b-a49zn9lt93] {
    outline: none;
    border-color: #1976d2;
}

.schedule-preview[b-a49zn9lt93] {
    margin-top: 12px;
    padding: 10px 12px;
    background: #e3f2fd;
    border-radius: 4px;
    font-size: 13px;
    color: #1565c0;
}

.schedule-preview i[b-a49zn9lt93] {
    margin-right: 6px;
}

.btn-schedule[b-a49zn9lt93] {
    padding: 10px 32px;
    background: #1565c0;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-schedule:hover[b-a49zn9lt93] {
    background: #0d47a1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-schedule:disabled[b-a49zn9lt93] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-schedule i[b-a49zn9lt93] {
    margin-right: 6px;
}

/* === Split Button Styling === */
.btn-publish-split[b-a49zn9lt93] {
    background: #2e7d32 !important;
    border: none !important;
    border-radius: 4px !important;
}

[b-a49zn9lt93] .btn-publish-split .e-split-btn {
    background: #2e7d32 !important;
    color: #fff !important;
    padding: 10px 24px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    border: none !important;
    border-radius: 4px 0 0 4px !important;
}

[b-a49zn9lt93] .btn-publish-split .e-split-btn:hover {
    background: #1b5e20 !important;
}

[b-a49zn9lt93] .btn-publish-split .e-dropdown-btn {
    background: #1b5e20 !important;
    color: #fff !important;
    border: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 0 4px 4px 0 !important;
    padding: 10px 12px !important;
}

[b-a49zn9lt93] .btn-publish-split .e-dropdown-btn:hover {
    background: #145214 !important;
}

[b-a49zn9lt93] .btn-publish-split .e-icon-btn {
    color: #fff !important;
}

/* Dropdown menu styling */
[b-a49zn9lt93] .e-dropdown-popup {
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #e0e0e0;
}

[b-a49zn9lt93] .e-dropdown-popup .e-item {
    padding: 10px 16px;
    font-size: 13px;
    color: #333;
}

[b-a49zn9lt93] .e-dropdown-popup .e-item:hover {
    background: #f5f5f5;
}

[b-a49zn9lt93] .e-dropdown-popup .e-item .e-menu-icon {
    margin-right: 8px;
    color: #666;
}

/* Schedule picker styling */
.schedule-picker-header[b-a49zn9lt93] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-weight: 500;
    color: #333;
}

.close-picker-btn[b-a49zn9lt93] {
    background: none;
    border: none;
    color: #666;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.close-picker-btn:hover[b-a49zn9lt93] {
    background: #e0e0e0;
}

.btn-confirm-schedule[b-a49zn9lt93] {
    width: 100%;
    margin-top: 12px;
    padding: 10px 16px;
    background: #1976d2;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    transition: background 0.2s;
}

.btn-confirm-schedule:hover[b-a49zn9lt93] {
    background: #1565c0;
}

.btn-confirm-schedule:disabled[b-a49zn9lt93] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-confirm-schedule i[b-a49zn9lt93] {
    margin-right: 6px;
}

/* === Image Prompt Info Icon & Popover === */
.image-prompt-info[b-a49zn9lt93] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease;
}

.image-prompt-info:hover[b-a49zn9lt93] {
    background: rgba(0, 0, 0, 0.7);
}

.prompt-info-icon[b-a49zn9lt93] {
    color: rgba(255, 255, 255, 0.95);
    font-size: 16px;
    cursor: pointer;
}

.prompt-info-icon:hover[b-a49zn9lt93] {
    color: #fff;
}

.prompt-popover[b-a49zn9lt93] {
    position: absolute;
    top: 30px;
    right: 0;
    width: 320px;
    max-height: 300px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    overflow: hidden;
}

.prompt-popover-header[b-a49zn9lt93] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    font-size: 13px;
    color: #333;
}

.prompt-popover-actions[b-a49zn9lt93] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.copy-prompt-btn[b-a49zn9lt93] {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.copy-prompt-btn:hover[b-a49zn9lt93] {
    background: #e0e0e0;
    color: #1976d2;
}

.copy-prompt-btn .fa-check[b-a49zn9lt93] {
    color: #2e7d32;
}

.close-popover[b-a49zn9lt93] {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 4px;
}

.close-popover:hover[b-a49zn9lt93] {
    background: #e0e0e0;
}

.prompt-popover-content[b-a49zn9lt93] {
    padding: 12px;
    font-size: 12px;
    line-height: 1.5;
    color: #555;
    max-height: 240px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 768px) {
    .post-editor-content[b-a49zn9lt93] {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    /* Stack image and right panel vertically on mobile */
    .image-section-row[b-a49zn9lt93] {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-items: stretch;
    }

    /* Make image container full width on mobile */
    .image-preview-container[b-a49zn9lt93] {
        width: 100%;
        max-width: 100%;
    }

    .image-wrapper[b-a49zn9lt93] {
        width: 100%;
    }

    /* Feed image responsive on mobile */
    .post-image.feed-image[b-a49zn9lt93] {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1/1;
    }

    /* Right panel full width below image */
    .image-right-panel[b-a49zn9lt93] {
        width: 100%;
        min-width: unset;
    }

    .confidence-indicator[b-a49zn9lt93] {
        grid-column: 1;
    }

    .post-editor-footer[b-a49zn9lt93] {
        flex-direction: column;
        gap: 10px;
    }

    .btn-cancel[b-a49zn9lt93],
    .btn-approve[b-a49zn9lt93] {
        width: 100%;
    }

    /* Schedule picker responsive */
    .schedule-inputs[b-a49zn9lt93] {
        flex-direction: column;
    }

    /* Prompt popover responsive */
    .prompt-popover[b-a49zn9lt93] {
        width: 280px;
        right: -8px;
    }
}
/* /Shared/Components/SocialMedia/PostHistory.razor.rz.scp.css */
/* Scoped CSS for PostHistory — Post Timeline block migrated from Client/Pages/SocialMedia.razor.css L85-386 (Phase 160). */
/* Cross-component base classes (.btn-sm / .btn-outline / .btn-danger-outline / .btn-sm.btn-primary) live in global social-media.css. */

.timeline-card[b-0m7bfl81v0] {
    border-top: 3px solid #666;
}

/* === Timeline Feed === */
.timeline-header[b-0m7bfl81v0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #e0e0e0;
}

.timeline-header-left h2[b-0m7bfl81v0] {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 4px 0;
}

.timeline-header-left p[b-0m7bfl81v0] {
    font-size: 12px;
    color: #666;
    margin: 0;
}

.timeline-header-right[b-0m7bfl81v0] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sync-btn[b-0m7bfl81v0] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    color: #333;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

.sync-btn:hover:not(:disabled)[b-0m7bfl81v0] {
    background: #f5f5f5;
    border-color: #1976d2;
    color: #1976d2;
}

.sync-btn:disabled[b-0m7bfl81v0] {
    opacity: 0.6;
    cursor: not-allowed;
}

.sync-btn i[b-0m7bfl81v0] {
    font-size: 12px;
}

.filter-select[b-0m7bfl81v0] {
    padding: 6px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    color: #333;
    background: #fff;
    cursor: pointer;
}

.filter-select:focus[b-0m7bfl81v0] {
    outline: none;
    border-color: #1976d2;
}

.timeline-feed[b-0m7bfl81v0] {
    padding: 0;
}

.timeline-empty[b-0m7bfl81v0] {
    text-align: center;
    padding: 48px 20px;
    color: #666;
}

.timeline-empty i[b-0m7bfl81v0] {
    font-size: 40px;
    color: #ccc;
    margin-bottom: 12px;
}

.timeline-empty p[b-0m7bfl81v0] {
    font-size: 14px;
    margin: 0;
}

/* === Feed Item === */
.feed-item[b-0m7bfl81v0] {
    padding: 16px;
    border-bottom: 1px solid #e0e0e0;
    transition: background 0.2s;
}

.feed-item:last-child[b-0m7bfl81v0] {
    border-bottom: none;
}

.feed-item:hover[b-0m7bfl81v0] {
    background: #fafafa;
}

.feed-item-header[b-0m7bfl81v0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.feed-status[b-0m7bfl81v0] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-badge[b-0m7bfl81v0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.scheduled[b-0m7bfl81v0] {
    background: #e3f2fd;
    color: #1565c0;
}

.status-badge.pending[b-0m7bfl81v0] {
    background: #fff8e1;
    color: #f57f17;
}

.status-badge.published[b-0m7bfl81v0] {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-badge.failed[b-0m7bfl81v0] {
    background: #ffebee;
    color: #c62828;
}

.status-badge.external[b-0m7bfl81v0] {
    background: #f3e5f5;
    color: #7b1fa2;
}

/* .post-type-badge + variants moved to global social-media.css (Phase 161 — cross-component reuse with PostComposer idea cards) */

.feed-time[b-0m7bfl81v0] {
    font-size: 12px;
    color: #666;
}

.feed-platforms[b-0m7bfl81v0] {
    display: flex;
    gap: 8px;
}

.platform-icon[b-0m7bfl81v0] {
    font-size: 18px;
}

.platform-icon.facebook[b-0m7bfl81v0] {
    color: #4267B2;
}

.platform-icon.instagram[b-0m7bfl81v0] {
    color: #E4405F;
}

.platform-icon.tiktok[b-0m7bfl81v0] {
    color: #010101;
}

.platform-icon.google[b-0m7bfl81v0] {
    color: #4285F4;
}

/* === Feed Content === */
.feed-item-content[b-0m7bfl81v0] {
    display: flex;
    gap: 14px;
    margin-bottom: 12px;
}

.feed-thumbnail[b-0m7bfl81v0] {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.feed-thumbnail-wrapper[b-0m7bfl81v0] {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    position: relative;
}

.feed-thumbnail-placeholder[b-0m7bfl81v0] {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    flex-shrink: 0;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 24px;
}

.feed-text[b-0m7bfl81v0] {
    flex: 1;
    min-width: 0;
}

.feed-caption[b-0m7bfl81v0] {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    margin-bottom: 6px;
}

.feed-hashtags[b-0m7bfl81v0] {
    font-size: 12px;
    color: #1976d2;
    margin-bottom: 6px;
}

.feed-engagement[b-0m7bfl81v0] {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: #666;
}

.feed-engagement span[b-0m7bfl81v0] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.feed-engagement .engagement-rate[b-0m7bfl81v0] {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.feed-engagement span[title="Views"][b-0m7bfl81v0] {
    color: var(--primary-color, #6366f1);
    font-weight: 500;
}

/* === Feed Actions === */
.feed-item-actions[b-0m7bfl81v0] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
/* /Shared/Components/SocialMedia/WeekPlanReviewPanel.razor.rz.scp.css */
/* Week Plan Review Panel — layout styles only.
   No Syncfusion interactions here; platform badges and status use plain CSS.
   Per CLAUDE.md: scoped .razor.css is fine for custom layout (no Syncfusion components). */

.week-plan-panel[b-ygeo4o2t63] {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    position: relative;
}

/* Header */
.week-plan-header[b-ygeo4o2t63] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.week-plan-header h2[b-ygeo4o2t63] {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.week-plan-subtitle[b-ygeo4o2t63] {
    color: #666;
    font-size: 0.875rem;
    margin: 0 0 0.5rem;
}

.week-plan-progress[b-ygeo4o2t63] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.progress-approved[b-ygeo4o2t63] { color: #16a34a; font-weight: 600; }
.progress-total[b-ygeo4o2t63] { color: #555; }
.progress-separator[b-ygeo4o2t63] { color: #999; }
.progress-rejected[b-ygeo4o2t63] { color: #dc2626; }

/* Generate button */
.generate-plan-btn[b-ygeo4o2t63] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.generate-plan-btn:hover:not(:disabled)[b-ygeo4o2t63] { background: #1d4ed8; }
.generate-plan-btn:disabled[b-ygeo4o2t63] { opacity: 0.6; cursor: not-allowed; }

/* States */
.week-plan-loading[b-ygeo4o2t63],
.week-plan-empty[b-ygeo4o2t63] {
    text-align: center;
    padding: 3rem 1rem;
    color: #888;
}

.week-plan-empty i[b-ygeo4o2t63] { font-size: 2.5rem; margin-bottom: 0.75rem; display: block; }
.week-plan-empty-hint[b-ygeo4o2t63] { font-size: 0.85rem; color: #aaa; margin-top: 0.5rem; }

.week-plan-error[b-ygeo4o2t63] {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #dc2626;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

/* Day sections */
.day-section[b-ygeo4o2t63] {
    margin-bottom: 2rem;
}

.day-header[b-ygeo4o2t63] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-left: 3px solid #2563eb;
    padding-left: 0.75rem;
    margin-bottom: 1rem;
}

.day-name[b-ygeo4o2t63] {
    font-weight: 600;
    font-size: 1rem;
}

.day-date[b-ygeo4o2t63] {
    color: #666;
    font-size: 0.875rem;
}

.day-post-count[b-ygeo4o2t63] {
    margin-left: auto;
    font-size: 0.8rem;
    color: #999;
    background: #f3f4f6;
    border-radius: 12px;
    padding: 0.15rem 0.6rem;
}

/* Post card grid — 1 column mobile, 2 columns md+ */
.day-posts-grid[b-ygeo4o2t63] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .day-posts-grid[b-ygeo4o2t63] {
        grid-template-columns: 1fr 1fr;
    }
}

/* Post cards */
.post-card[b-ygeo4o2t63] {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1rem;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: border-color 0.15s, opacity 0.15s;
}

.post-card.approved[b-ygeo4o2t63] {
    border-color: #86efac;
    background: #f0fdf4;
}

.post-card.rejected[b-ygeo4o2t63] {
    opacity: 0.55;
    border-color: #d1d5db;
    background: #f9fafb;
}

/* Card header */
.post-card-header[b-ygeo4o2t63] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Platform badges — color-coded */
.platform-badge[b-ygeo4o2t63] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 20px;
    padding: 0.2rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
}

.platform-badge.platform-instagram[b-ygeo4o2t63] {
    background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.platform-badge.platform-facebook[b-ygeo4o2t63] {
    background: #1877f2;
}

.platform-badge.platform-tiktok[b-ygeo4o2t63] {
    background: #010101;
    color: #fff;
}

.platform-badge.platform-gbp[b-ygeo4o2t63] {
    background: #0f9d58;
}

/* Content type tag */
.content-type-tag[b-ygeo4o2t63] {
    font-size: 0.75rem;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
}

/* Status badge */
.status-badge[b-ygeo4o2t63] {
    margin-left: auto;
    font-size: 0.72rem;
    border-radius: 12px;
    padding: 0.15rem 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.status-badge.status-plan-draft[b-ygeo4o2t63] { background: #e0f2fe; color: #0369a1; }
.status-badge.status-scheduled[b-ygeo4o2t63]  { background: #dcfce7; color: #166534; }
.status-badge.status-rejected[b-ygeo4o2t63]   { background: #fee2e2; color: #991b1b; }

/* Forbidden words warning */
.forbidden-words-warning[b-ygeo4o2t63] {
    background: #fffbeb;
    border: 1px solid #fbbf24;
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Caption */
.field-label[b-ygeo4o2t63] {
    display: block;
    font-size: 0.78rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.caption-textarea[b-ygeo4o2t63] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    resize: vertical;
    background: #fff;
    transition: border-color 0.15s;
    font-family: inherit;
    box-sizing: border-box;
}

.caption-textarea:focus[b-ygeo4o2t63] { outline: none; border-color: #2563eb; }
.caption-textarea:disabled[b-ygeo4o2t63] { background: #f9fafb; color: #6b7280; }

/* Image prompt */
.image-prompt-details[b-ygeo4o2t63] {
    font-size: 0.82rem;
    color: #6b7280;
}

.image-prompt-details summary[b-ygeo4o2t63] {
    cursor: pointer;
    font-weight: 500;
    user-select: none;
    padding: 0.2rem 0;
}

.image-prompt-text[b-ygeo4o2t63] {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    background: #f3f4f6;
    border-radius: 6px;
    line-height: 1.5;
}

/* Hashtags */
.post-hashtags[b-ygeo4o2t63] {
    font-size: 0.8rem;
    color: #2563eb;
    word-break: break-word;
}

/* Scheduled time */
.schedule-input[b-ygeo4o2t63] {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}

.schedule-input:disabled[b-ygeo4o2t63] { background: #f9fafb; color: #6b7280; }

/* Action buttons */
.post-card-actions[b-ygeo4o2t63] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.btn-approve[b-ygeo4o2t63],
.btn-reject[b-ygeo4o2t63] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: none;
    border-radius: 8px;
    padding: 0.55rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}

.btn-approve[b-ygeo4o2t63] {
    background: #16a34a;
    color: #fff;
}

.btn-approve:hover:not(:disabled)[b-ygeo4o2t63] { background: #15803d; }

.btn-reject[b-ygeo4o2t63] {
    background: #fff;
    color: #dc2626;
    border: 1.5px solid #dc2626;
}

.btn-reject:hover:not(:disabled)[b-ygeo4o2t63] { background: #fef2f2; }

.btn-approve:disabled[b-ygeo4o2t63],
.btn-reject:disabled[b-ygeo4o2t63] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Toast notification */
.week-plan-toast[b-ygeo4o2t63] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9000;
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: slideInRight-b-ygeo4o2t63 0.2s ease;
}

.toast-success[b-ygeo4o2t63] { background: #16a34a; color: #fff; }
.toast-error[b-ygeo4o2t63]   { background: #dc2626; color: #fff; }
.toast-info[b-ygeo4o2t63]    { background: #2563eb; color: #fff; }

@keyframes slideInRight-b-ygeo4o2t63 {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);   opacity: 1; }
}
/* /Shared/Components/Start/AddressCard.razor.rz.scp.css */
/* AddressCard — Wave 1 token migration
   Token source: qonnect-design-system/project/colors_and_type.css */

.CardBottomMargin[b-7gvvag73tk] {
    padding-bottom: var(--space-3);
    width: 100%;
    display: flex;
    flex-direction: column;
}

.CardBottomMargin[b-7gvvag73tk]  .e-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: stretch;
}

[b-7gvvag73tk] .e-card .e-card-content {
    padding: 0;
    flex: 0 0 auto;
}

.address-card[b-7gvvag73tk] {
    padding: var(--space-4) var(--space-5);
}

.card-title[b-7gvvag73tk] {
    font-size: var(--size-500);
    font-weight: var(--weight-semi);
    color: var(--ink);
    margin-bottom: var(--space-4);
    font-family: var(--font-sans);
}

.address-content[b-7gvvag73tk] {
    padding: var(--space-3) 0;
}

.address-link[b-7gvvag73tk] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--ink);
    text-decoration: none;
    transition: color var(--motion-duration) var(--motion-curve);
}

.address-link:hover[b-7gvvag73tk] {
    color: var(--status-ok);
}

.address-icon[b-7gvvag73tk] {
    font-size: var(--size-500);
    color: var(--status-ok);
    margin-top: 2px;
}

.address-text[b-7gvvag73tk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.street[b-7gvvag73tk] {
    font-size: var(--size-400);
    font-weight: var(--weight-medium);
}

.city[b-7gvvag73tk] {
    font-size: var(--size-300);
    color: var(--text-secondary);
}

@media (max-width: 480px) {
    .address-card[b-7gvvag73tk] {
        padding: var(--space-3) var(--space-4);
    }

    .street[b-7gvvag73tk] {
        font-size: var(--size-300);
    }

    .city[b-7gvvag73tk] {
        font-size: var(--size-200);
    }
}
/* /Shared/Components/Start/FaqCard.razor.rz.scp.css */
/* FaqCard — Phase 260 Plan 02
   Tokens: var(--larssons-*) only. Hex literals forbidden.
   D-06: static all-expanded (no <details>/<summary>, no JS). */

.faq-card[b-vbyaua2xsk] {
    border-bottom: 1px solid var(--larssons-cream-dark);
    padding: 1.25rem 0;
}

.faq-card:last-child[b-vbyaua2xsk] {
    border-bottom: none;
}

.faq-card__question[b-vbyaua2xsk] {
    font-family: var(--larssons-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--larssons-charcoal);
    margin: 0 0 0.5rem;
}

.faq-card__answer[b-vbyaua2xsk] {
    font-family: var(--larssons-font-body);
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--larssons-brown-mid);
    line-height: 1.6;
    margin: 0;
}
/* /Shared/Components/Start/HeritageStoryCard.razor.rz.scp.css */
/* HeritageStoryCard — Phase 260 Plan 02
   Tokens: var(--larssons-*) only. Hex literals forbidden.
   Note: rgba() literals derived from cream/brown tokens are stripped before the
   hex-gate regex runs, so the test ignores them. */

.hsc[b-w2ngr5undn] {
    padding: 8rem 3rem;
    background: var(--larssons-charcoal);
    color: var(--larssons-cream);
}

.hsc__grid[b-w2ngr5undn] {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
}

.hsc__eyebrow[b-w2ngr5undn] {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--larssons-font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(242, 235, 224, 0.4);
    margin-bottom: 1.5rem;
}

.hsc__eyebrow[b-w2ngr5undn]::before {
    content: '';
    width: 30px;
    height: 1px;
    background: rgba(242, 235, 224, 0.3);
}

.hsc__title[b-w2ngr5undn] {
    font-family: var(--larssons-font-display);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 900;
    line-height: 1.12;
    margin: 0 0 2rem;
    color: var(--larssons-cream);
}

.hsc__title-emphasis[b-w2ngr5undn] {
    font-style: italic;
    color: var(--larssons-red-bright);
    font-family: var(--larssons-font-display);
}

.hsc__body[b-w2ngr5undn] {
    font-family: var(--larssons-font-body);
    font-size: 0.95rem;
    line-height: 1.85;
    color: rgba(242, 235, 224, 0.6);
    font-weight: 400;
}

.hsc__body p[b-w2ngr5undn] {
    margin: 0 0 1rem;
}

.hsc__body p:last-child[b-w2ngr5undn] {
    margin-bottom: 0;
}

.hsc__year[b-w2ngr5undn] {
    position: relative;
    text-align: right;
}

.hsc__year-display[b-w2ngr5undn] {
    font-family: var(--larssons-font-display);
    font-weight: 900;
    font-size: clamp(7rem, 14vw, 11rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(242, 235, 224, 0.1);
}

.hsc__year-caption[b-w2ngr5undn] {
    font-family: var(--larssons-font-accent);
    font-style: italic;
    font-size: 1.1rem;
    color: rgba(242, 235, 224, 0.25);
    margin-top: -1rem;
}

@media (max-width: 900px) {
    .hsc[b-w2ngr5undn] { padding: 5rem 1.5rem; }
    .hsc__grid[b-w2ngr5undn] { grid-template-columns: 1fr; gap: 3rem; }
    .hsc__year[b-w2ngr5undn] { text-align: center; order: -1; }
}
/* /Shared/Components/Start/ImageCard.razor.rz.scp.css */
/* ImageCard — Wave 1 token migration
   Removed dead ::deep .ImageCard rule (hardcoded blob URL — drift rule D7).
   Token source: qonnect-design-system/project/colors_and_type.css */

[b-jvq3nau58n] .e-card .e-card-content {
    padding: 0;
}

.CardBottomMargin[b-jvq3nau58n] {
    padding-bottom: var(--space-3);
}

.HeaderImageHeight[b-jvq3nau58n] {
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-card-text-content[b-jvq3nau58n] {
    padding: var(--space-6);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.card-subheading[b-jvq3nau58n] {
    font-size: var(--size-700);
    font-weight: var(--weight-semi);
    color: var(--accent);
}

.card-body[b-jvq3nau58n] {
    font-size: var(--size-500);
    color: var(--text-body);
    line-height: 1.5;
}

.card-tagline[b-jvq3nau58n] {
    font-size: var(--size-300);
    color: var(--text-secondary);
    font-style: italic;
    margin-top: var(--space-2);
}
/* /Shared/Components/Start/LandingFullStretchedImage.razor.rz.scp.css */
[b-y0x29mm8vd] .e-card {
    padding: 0px;
    height: 100vh; /* Full viewport height */
    top: 0;
    left: 0;
}

[b-y0x29mm8vd] .ImageCard {
    height: 100vh; /* Full viewport height */
}

.CardBottomMargin[b-y0x29mm8vd] {
    padding-bottom: 10px;
}

.HeaderImageHeight[b-y0x29mm8vd] {
    height: 100%; /* Adjust to full height */
    display: flex;
    flex-direction: column; /* Arrange children in a column */
    justify-content: center;
    align-items: center;
}

.Title[b-y0x29mm8vd] {
    color: white;
    font-size: 2rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.Logo[b-y0x29mm8vd] {
    max-width: 80%;  /* Adjust the width as needed */
    max-height: 80%; /* Adjust the height as needed */
    object-fit: contain;
    margin-top: 20px
}
/* /Shared/Components/Start/OpeningHoursCard.razor.rz.scp.css */
/* OpeningHoursCard — Wave 1 token migration
   Token source: qonnect-design-system/project/colors_and_type.css */

.CardBottomMargin[b-6eyj3pw6yw] {
    padding-bottom: var(--space-3);
    width: 100%;
    display: flex;
    flex-direction: column;
}

.CardBottomMargin[b-6eyj3pw6yw]  .e-card {
    flex: 1;
}

[b-6eyj3pw6yw] .e-card .e-card-content {
    padding: 0;
}

.opening-hours-card[b-6eyj3pw6yw] {
    padding: var(--space-4) var(--space-5);
}

.card-title[b-6eyj3pw6yw] {
    font-size: var(--size-500);
    font-weight: var(--weight-semi);
    color: var(--ink);
    margin-bottom: var(--space-4);
    font-family: var(--font-sans);
}

/* Weekly Schedule */
.weekly-schedule[b-6eyj3pw6yw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.day-row[b-6eyj3pw6yw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--size-300);
    color: var(--text-body);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
}

.day-row:last-child[b-6eyj3pw6yw] {
    border-bottom: none;
}

.day-row .day-name[b-6eyj3pw6yw] {
    font-weight: var(--weight-regular);
}

.day-row .hours[b-6eyj3pw6yw] {
    font-weight: var(--weight-regular);
    color: var(--text-secondary);
}

.day-row.today[b-6eyj3pw6yw] {
    font-weight: var(--weight-semi);
    color: var(--ink);
    background: var(--surface-subtle);
    margin: 0 calc(-1 * var(--space-5));
    padding: var(--space-2) var(--space-5);
}

.day-row.today .day-name[b-6eyj3pw6yw] {
    font-weight: var(--weight-semi);
}

.day-row.today .hours[b-6eyj3pw6yw] {
    font-weight: var(--weight-semi);
    color: var(--ink);
}

.day-row.closed .hours[b-6eyj3pw6yw] {
    color: var(--text-muted);
    font-style: italic;
}

/* Exceptions Section */
.exceptions-section[b-6eyj3pw6yw] {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

.section-title[b-6eyj3pw6yw] {
    font-size: var(--size-200);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.exception-row[b-6eyj3pw6yw] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--size-200);
    color: var(--text-body);
    padding: var(--space-1) 0;
}

.exception-row .date[b-6eyj3pw6yw] {
    min-width: 50px;
    font-weight: var(--weight-medium);
    color: var(--text-body);
}

.exception-row .status[b-6eyj3pw6yw] {
    font-weight: var(--weight-regular);
}

.exception-row .reason[b-6eyj3pw6yw] {
    color: var(--text-muted);
    font-style: italic;
    flex: 1;
    text-align: right;
}

@media (max-width: 480px) {
    .opening-hours-card[b-6eyj3pw6yw] {
        padding: var(--space-3) var(--space-4);
    }

    .day-row[b-6eyj3pw6yw] {
        font-size: var(--size-200);
    }

    .day-row.today[b-6eyj3pw6yw] {
        margin: 0 calc(-1 * var(--space-4));
        padding: var(--space-2) var(--space-4);
    }

    .exception-row[b-6eyj3pw6yw] {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .exception-row .reason[b-6eyj3pw6yw] {
        width: 100%;
        text-align: left;
        padding-left: 62px;
    }
}
/* /Shared/Components/Start/PhoneCard.razor.rz.scp.css */
/* PhoneCard — Wave 1 token migration
   Token source: qonnect-design-system/project/colors_and_type.css */

.CardBottomMargin[b-yfo4ywrfnu] {
    padding-bottom: var(--space-3);
    width: 100%;
    display: flex;
    flex-direction: column;
}

.CardBottomMargin[b-yfo4ywrfnu]  .e-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: stretch;
}

[b-yfo4ywrfnu] .e-card .e-card-content {
    padding: 0;
    flex: 0 0 auto;
}

.phone-card[b-yfo4ywrfnu] {
    padding: var(--space-4) var(--space-5);
}

.card-title[b-yfo4ywrfnu] {
    font-size: var(--size-500);
    font-weight: var(--weight-semi);
    color: var(--ink);
    margin-bottom: var(--space-4);
    font-family: var(--font-sans);
}

.phone-content[b-yfo4ywrfnu] {
    padding: var(--space-3) 0;
}

.phone-link[b-yfo4ywrfnu] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--ink);
    text-decoration: none;
    font-size: var(--size-500);
    font-weight: var(--weight-medium);
    transition: color var(--motion-duration) var(--motion-curve);
}

.phone-link:hover[b-yfo4ywrfnu] {
    color: var(--status-ok);
}

.phone-icon[b-yfo4ywrfnu] {
    font-size: var(--size-500);
    color: var(--status-ok);
}

.phone-number[b-yfo4ywrfnu] {
    letter-spacing: 0.5px;
}

@media (max-width: 480px) {
    .phone-card[b-yfo4ywrfnu] {
        padding: var(--space-3) var(--space-4);
    }

    .phone-link[b-yfo4ywrfnu] {
        font-size: var(--size-500);
    }
}
/* /Shared/Components/Start/PricingCard.razor.rz.scp.css */
/* PricingCard — Phase 260 Plan 02
   Tokens: var(--larssons-*) only. Hex literals forbidden. */

.pricing-card[b-uzwmox91u2] {
    position: relative;
    background: var(--larssons-cream-light);
    border: 1px solid var(--larssons-cream-dark);
    padding: 3rem 2.2rem;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.pricing-card:hover[b-uzwmox91u2] {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(62, 44, 35, 0.1);
}

.pricing-card--featured[b-uzwmox91u2] {
    border-color: var(--larssons-red);
    transform: scale(1.04);
    box-shadow: 0 12px 36px rgba(139, 26, 16, 0.12);
}

.pricing-card--featured:hover[b-uzwmox91u2] {
    transform: scale(1.04) translateY(-4px);
}

.pricing-card__badge[b-uzwmox91u2] {
    position: absolute;
    top: -0.85rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--larssons-red);
    color: var(--larssons-cream);
    padding: 0.3rem 1rem;
    font-family: var(--larssons-font-body);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border-radius: 999px;
}

.pricing-card__tier[b-uzwmox91u2] {
    font-family: var(--larssons-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--larssons-brown-light);
    margin: 0 0 1rem;
}

.pricing-card__count[b-uzwmox91u2] {
    font-family: var(--larssons-font-display);
    font-weight: 900;
    font-size: 3.8rem;
    color: var(--larssons-charcoal);
    line-height: 1;
    margin-bottom: 0.4rem;
}

.pricing-card__count-label[b-uzwmox91u2] {
    font-family: var(--larssons-font-body);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--larssons-brown-mid);
    margin-left: 0.4rem;
}

.pricing-card__price[b-uzwmox91u2] {
    font-family: var(--larssons-font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--larssons-red);
    margin-bottom: 0.3rem;
}

.pricing-card__unit-cost[b-uzwmox91u2] {
    font-family: var(--larssons-font-body);
    font-size: 0.78rem;
    color: var(--larssons-brown-light);
    margin-bottom: 1.5rem;
}

.pricing-card__perks[b-uzwmox91u2] {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    flex-grow: 1;
}

.pricing-card__perks li[b-uzwmox91u2] {
    border-bottom: 1px solid var(--larssons-cream-dark);
    padding: 0.7rem 0;
    color: var(--larssons-brown-mid);
    font-family: var(--larssons-font-body);
    font-size: 0.82rem;
    font-weight: 400;
}

.pricing-card__perks li:last-child[b-uzwmox91u2] {
    border-bottom: none;
}

.pricing-card__cta[b-uzwmox91u2] {
    align-self: stretch;
    text-align: center;
}
/* /Shared/Components/Start/ProductDetailCard.razor.rz.scp.css */
/* ProductDetailCard — Phase 260 Plan 02
   Tokens: var(--larssons-*) only. Hex literals forbidden. */

.pdc[b-c34jnakbd6] {
    padding: 6rem 3rem;
    background: var(--larssons-cream-light);
}

.pdc__layout[b-c34jnakbd6] {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.pdc__label-wrapper[b-c34jnakbd6] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pdc__label-pair[b-c34jnakbd6] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    perspective: 1200px;
}

.pdc__label-card[b-c34jnakbd6] {
    background: var(--larssons-cream);
    border: 1px solid var(--larssons-cream-dark);
    box-shadow: 0 10px 30px rgba(62, 44, 35, 0.1);
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.pdc__label-front[b-c34jnakbd6] {
    width: 260px;
}

.pdc__label-front:hover[b-c34jnakbd6] {
    transform: translateY(-6px);
}

.pdc__label-back[b-c34jnakbd6] {
    width: 240px;
    margin-top: 1.5rem;
    transform: rotateY(8deg);
    opacity: 0.92;
}

.pdc__label-back:hover[b-c34jnakbd6] {
    transform: rotateY(0) translateY(-4px);
    opacity: 1;
}

.pdc__label-card img[b-c34jnakbd6] {
    display: block;
    width: 100%;
    height: auto;
}

.pdc__eyebrow[b-c34jnakbd6] {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--larssons-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--larssons-red);
    margin-bottom: 1.5rem;
}

.pdc__eyebrow[b-c34jnakbd6]::before {
    content: '';
    width: 30px;
    height: 1.5px;
    background: var(--larssons-red);
}

.pdc__title[b-c34jnakbd6] {
    font-family: var(--larssons-font-display);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    line-height: 1.12;
    margin: 0 0 2rem;
    color: var(--larssons-charcoal);
}

.pdc__title-emphasis[b-c34jnakbd6] {
    font-style: italic;
    color: var(--larssons-red);
    font-family: var(--larssons-font-display);
}

.pdc__details[b-c34jnakbd6] {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    margin-bottom: 2.5rem;
}

.pdc__detail-row[b-c34jnakbd6] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.pdc__detail-icon[b-c34jnakbd6] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border: 1.5px solid var(--larssons-cream-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    background: var(--larssons-cream);
}

.pdc__detail-text h4[b-c34jnakbd6] {
    font-family: var(--larssons-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0 0 0.2rem;
    color: var(--larssons-charcoal);
}

.pdc__detail-text p[b-c34jnakbd6] {
    font-family: var(--larssons-font-body);
    font-size: 0.85rem;
    color: var(--larssons-brown-mid);
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

.pdc__ingredients[b-c34jnakbd6] {
    border-top: 1px solid var(--larssons-cream-dark);
    padding-top: 1.8rem;
    margin-top: 0.5rem;
}

.pdc__ingredients h4[b-c34jnakbd6] {
    font-family: var(--larssons-font-body);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--larssons-brown-light);
    margin: 0 0 0.7rem;
}

.pdc__ingredients p[b-c34jnakbd6] {
    font-family: var(--larssons-font-body);
    font-size: 0.8rem;
    color: var(--larssons-brown-mid);
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 900px) {
    .pdc[b-c34jnakbd6] { padding: 4rem 1.5rem; }
    .pdc__layout[b-c34jnakbd6] { grid-template-columns: 1fr; gap: 3rem; }
    .pdc__label-pair[b-c34jnakbd6] { flex-direction: column; align-items: center; }
    .pdc__label-front[b-c34jnakbd6] { width: 240px; }
    .pdc__label-back[b-c34jnakbd6] { width: 220px; transform: none; margin-top: 0; }
}
/* /Shared/Components/Start/ProductListView.razor.rz.scp.css */
/* ProductListView — Wave 1 token migration
   See: qonnect-design-system/project/preview/domain-primitives/product-list-view.html
   Drift rules: no hex, no font-family override, no bootstrap grays.
   Token source: qonnect-design-system/project/colors_and_type.css */

/* --- Floating edit button (admin-only) --- */
.product-view-wrapper[b-55gh7x14hl] {
    position: relative;
    width: 100%;
}

.product-view-wrapper:hover .floating-edit-btn[b-55gh7x14hl] {
    opacity: 1;
}

.floating-edit-btn[b-55gh7x14hl] {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    background-color: var(--status-ok);
    border: none;
    color: var(--surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--motion-duration) var(--motion-curve),
                transform var(--motion-duration) var(--motion-curve);
    z-index: 1000;
    box-shadow: var(--elevation-2);
}

.floating-edit-btn:hover[b-55gh7x14hl] {
    transform: scale(1.1);
    background-color: var(--status-ok);
    filter: brightness(0.92);
}

.floating-edit-btn .e-icons[b-55gh7x14hl] {
    font-size: var(--size-500);
}

/* --- Card outer spacing --- */
.CardMargin[b-55gh7x14hl] {
    padding-bottom: var(--space-3);
    width: 100%;
}

.CardBottomMargin[b-55gh7x14hl] {
    padding-bottom: var(--space-5);
}

[b-55gh7x14hl] .e-card {
    box-shadow: var(--elevation-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-5) !important;
    overflow: hidden;
    transition: box-shadow var(--motion-duration) var(--motion-curve);
}

[b-55gh7x14hl] .e-card:hover {
    box-shadow: var(--elevation-2);
}

[b-55gh7x14hl] .e-card .e-card-content {
    padding: 0;
}

/* --- Hero --- */
.HeaderImageHeight[b-55gh7x14hl] {
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Title[b-55gh7x14hl] {
    background: rgba(26, 26, 26, 0.4); /* rgba of --ink */
    padding: var(--space-5) var(--space-10);
    color: var(--surface);
    font-size: var(--size-1000);
    font-weight: var(--weight-bold);
}

/* --- ListView neutralise Syncfusion selection styling --- */
[b-55gh7x14hl] .e-listview .e-list-item.e-active,
[b-55gh7x14hl] .e-listview .e-list-item.e-focused,
[b-55gh7x14hl] .e-listview .e-list-item:focus,
[b-55gh7x14hl] .e-listview .e-list-item.e-hover,
[b-55gh7x14hl] .e-listview .e-list-item:hover {
    background-color: transparent !important;
    color: inherit !important;
}

[b-55gh7x14hl] .e-listview .e-list-item.e-active::before,
[b-55gh7x14hl] .e-listview .e-list-item.e-focused::before {
    background: transparent !important;
}

/* --- Row layout --- */
#wrapper[b-55gh7x14hl] {
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: auto;
}

#left[b-55gh7x14hl], #Center[b-55gh7x14hl], #right[b-55gh7x14hl] {
    min-height: 65px;
}

#Center[b-55gh7x14hl] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--space-2) 0 var(--space-2) var(--space-3);
    gap: var(--space-1);
    text-align: left;
    align-items: flex-start;
}

#left[b-55gh7x14hl], #right[b-55gh7x14hl] {
    display: flex;
}

#left[b-55gh7x14hl] {
    align-items: flex-start;
    padding-left: var(--space-2);
    padding-top: var(--space-2);
}

#right[b-55gh7x14hl] {
    align-items: center;
}

#List .ProductNumber[b-55gh7x14hl] {
    font-size: var(--size-400);
    font-family: var(--font-mono);
    color: var(--text-muted);
    margin: 0;
}

/* --- Typography --- */
.main-title[b-55gh7x14hl] {
    font-weight: var(--weight-semi);
    font-size: var(--size-500);
    color: var(--ink);
    margin: 0;
}

.second-title[b-55gh7x14hl] {
    font-weight: var(--weight-regular);
    font-size: var(--size-300);
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
}

.description[b-55gh7x14hl] {
    font-size: var(--size-300);
    color: var(--text-body);
    line-height: 1.4;
    margin: 0 0 var(--space-2) 0;
}

/* --- Price column --- */
#List .ProductPrice[b-55gh7x14hl] {
    font-size: var(--size-400);
    font-weight: var(--weight-regular);
    color: var(--text-body);
    margin: 0;
}

[b-55gh7x14hl] .e-priceButtonWidth {
    background: var(--ink);
    width: 3.8rem;
    height: 2.2rem;
    color: var(--text-on-accent);
    margin-top: var(--space-1);
    border: none;
    border-radius: var(--radius-pill);
    font-size: var(--size-400);
    font-weight: var(--weight-medium);
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background var(--motion-duration) var(--motion-curve),
                transform var(--motion-duration) var(--motion-curve);
}

[b-55gh7x14hl] .e-priceButtonWidth:hover {
    background: var(--ink-hover);
    transform: scale(1.05);
}

[b-55gh7x14hl] .e-priceButtonWidth:active {
    transform: scale(0.97);
}

/* --- Group header (PriceToggle) --- */
.e-listview .e-list-group-item .buttonPosition[b-55gh7x14hl] {
    top: var(--space-2);
    right: var(--space-2);
    position: absolute;
}

[b-55gh7x14hl] #MenyButtonGroup .e-btn {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text-body);
    font-family: var(--font-sans);
}

[b-55gh7x14hl] #MenyButtonGroup .e-btn:hover {
    background-color: var(--surface-subtle);
}

[b-55gh7x14hl] #MenyButtonGroup .e-btn:focus,
[b-55gh7x14hl] #MenyButtonGroup .e-btn:active {
    background-color: var(--ink);
    color: var(--text-on-accent);
}

[b-55gh7x14hl] #MenyButtonGroup .e-select {
    background-color: var(--ink) !important;
    color: var(--text-on-accent) !important;
}

/* --- Dialog (Syncfusion) positioning helper --- */
[b-55gh7x14hl] .e-dialog {
    max-height: 100%;
    max-width: 100%;
    min-width: 240px;
    position: absolute;
}

/* --- Decorative divider --- */
.line[b-55gh7x14hl] {
    width: 112px;
    height: 47px;
    border-bottom: 1px solid var(--ink);
    position: absolute;
}

/* --- Sushi chips --- */
[b-55gh7x14hl] .sushi-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--space-2) !important;
    padding-top: var(--space-2) !important;
    padding-bottom: var(--space-3) !important;
    align-items: center !important;
}

[b-55gh7x14hl] .sushi-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    padding: var(--space-1) var(--space-3) !important;
    border-radius: var(--radius-pill) !important;
    font-size: var(--size-400) !important;
    color: var(--text-body) !important;
    font-weight: var(--weight-medium) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: var(--elevation-1) !important;
}

@media (max-width: 480px) {
    #left[b-55gh7x14hl], #Center[b-55gh7x14hl], #right[b-55gh7x14hl] {
        height: auto;
    }

    #Center[b-55gh7x14hl] {
        padding-left: var(--space-2);
    }

    [b-55gh7x14hl] .e-priceButtonWidth {
        width: 3rem;
        height: 1.9rem;
        font-size: var(--size-300);
    }

    [b-55gh7x14hl] .sushi-chip {
        font-size: var(--size-300) !important;
        padding: var(--space-1) var(--space-2) !important;
    }

    [b-55gh7x14hl] .sushi-list {
        gap: var(--space-1) !important;
    }
}
/* /Shared/Components/Start/ProductSplitHero.razor.rz.scp.css */
/* ProductSplitHero — Phase 260 Plan 02
   Tokens: var(--larssons-*) only. Hex literals forbidden (RazorCssNoHexLiteralsTest).
   Color references resolve under body.larssons-grill via colors_and_type.css :190-225. */

.psh-nav[b-6hi42ajx36] {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 3rem;
    background: var(--larssons-cream);
    transition: background 0.3s, box-shadow 0.3s;
}

.psh-nav__logo[b-6hi42ajx36] {
    font-family: var(--larssons-font-display);
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--larssons-brown);
}

.psh-nav__logo span[b-6hi42ajx36] {
    color: var(--larssons-red);
    margin: 0 0.35rem;
}

.psh-nav__links[b-6hi42ajx36] {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}

.psh-nav__links a[b-6hi42ajx36] {
    font-family: var(--larssons-font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--larssons-brown-light);
    text-decoration: none;
    transition: color 0.3s;
}

.psh-nav__links a:hover[b-6hi42ajx36] {
    color: var(--larssons-red);
}

.psh-nav__cta[b-6hi42ajx36] {
    background: var(--larssons-red);
    color: var(--larssons-cream) !important;
    padding: 0.6rem 1.6rem;
    border-radius: 2px;
    font-weight: 600 !important;
    transition: background 0.3s, transform 0.2s;
}

.psh-nav__cta:hover[b-6hi42ajx36] {
    background: var(--larssons-red-hover);
    transform: translateY(-1px);
}

.psh-hero[b-6hi42ajx36] {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--larssons-cream);
    overflow: hidden;
    padding: 6rem 3rem 4rem;
}

.psh-hero__rays[b-6hi42ajx36] {
    position: absolute;
    inset: 0;
    background: repeating-conic-gradient(
        from 0deg,
        transparent 0deg 10deg,
        var(--larssons-brown-light) 10deg 10.2deg
    );
    opacity: 0.025;
    pointer-events: none;
}

.psh-hero__split[b-6hi42ajx36] {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: 1200px;
    width: 100%;
    align-items: center;
}

.psh-hero__text[b-6hi42ajx36] {
    text-align: left;
}

.psh-hero__badge[b-6hi42ajx36] {
    display: inline-block;
    padding: 0.5rem 1.4rem;
    border-radius: 999px;
    background: rgba(139, 26, 16, 0.08);
    color: var(--larssons-red);
    font-family: var(--larssons-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.psh-hero__title[b-6hi42ajx36] {
    font-family: var(--larssons-font-display);
    font-weight: 900;
    font-size: clamp(3.5rem, 7vw, 7rem);
    line-height: 0.92;
    letter-spacing: -0.02em;
    color: var(--larssons-charcoal);
    margin: 0 0 1.5rem;
}

.psh-hero__title-line[b-6hi42ajx36] {
    display: block;
}

.psh-hero__title-accent[b-6hi42ajx36] {
    display: block;
    color: var(--larssons-red);
    font-style: italic;
}

.psh-hero__subtitle[b-6hi42ajx36] {
    font-family: var(--larssons-font-accent);
    font-style: italic;
    font-size: clamp(1.2rem, 1.6vw, 1.7rem);
    color: var(--larssons-brown-mid);
    line-height: 1.4;
    margin-bottom: 1.5rem;
}

.psh-hero__tagline[b-6hi42ajx36] {
    font-family: var(--larssons-font-body);
    font-size: 1rem;
    color: var(--larssons-brown-mid);
    line-height: 1.8;
    margin: 0 0 2rem;
    max-width: 28rem;
}

.psh-hero__actions[b-6hi42ajx36] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    animation: pshFadeUp-b-6hi42ajx36 0.8s ease-out 0.6s both;
}

.btn[b-6hi42ajx36] {
    display: inline-block;
    padding: 0.9rem 1.8rem;
    font-family: var(--larssons-font-body);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    transition: transform 0.2s, background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.btn-primary[b-6hi42ajx36] {
    background: var(--larssons-red);
    color: var(--larssons-cream);
    border: 1px solid var(--larssons-red);
}

.btn-primary:hover[b-6hi42ajx36] {
    background: var(--larssons-red-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 26, 16, 0.25);
}

.btn-secondary[b-6hi42ajx36] {
    background: transparent;
    color: var(--larssons-brown);
    border: 1px solid var(--larssons-warm-gray);
}

.btn-secondary:hover[b-6hi42ajx36] {
    border-color: var(--larssons-red);
    color: var(--larssons-red);
}

.psh-hero__product[b-6hi42ajx36] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.psh-hero__label-glow[b-6hi42ajx36] {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 26, 16, 0.07) 0%, transparent 65%);
    filter: blur(40px);
    pointer-events: none;
}

.psh-hero__label-img[b-6hi42ajx36] {
    position: relative;
    z-index: 1;
    width: 320px;
    height: auto;
    box-shadow: 0 8px 40px rgba(62, 44, 35, 0.12);
    animation: pshHeroLabelIn-b-6hi42ajx36 1s ease-out 0.4s both;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.psh-hero__label-img:hover[b-6hi42ajx36] {
    transform: translateY(-8px) rotate(0.5deg);
}

.psh-hero__scroll[b-6hi42ajx36] {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    pointer-events: none;
}

.psh-hero__scroll span[b-6hi42ajx36] {
    font-family: var(--larssons-font-body);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--larssons-brown-light);
    opacity: 0.4;
}

.psh-hero__scroll-line[b-6hi42ajx36] {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--larssons-red), transparent);
    opacity: 0.3;
    animation: pshScrollPulse-b-6hi42ajx36 2s ease-in-out infinite;
}

@keyframes pshHeroLabelIn-b-6hi42ajx36 {
    from { opacity: 0; transform: translateY(30px) rotate(-1deg); }
    to   { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes pshFadeUp-b-6hi42ajx36 {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pshScrollPulse-b-6hi42ajx36 {
    0%, 100% { opacity: 0.15; transform: scaleY(0.6); }
    50%      { opacity: 0.4;  transform: scaleY(1); }
}

@media (max-width: 900px) {
    .psh-nav[b-6hi42ajx36] { padding: 1rem 1.25rem; }
    .psh-nav__links a:not(.psh-nav__cta)[b-6hi42ajx36] { display: none; }
    .psh-hero[b-6hi42ajx36] { padding: 5rem 1.5rem 3rem; }
    .psh-hero__split[b-6hi42ajx36] { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
    .psh-hero__text[b-6hi42ajx36] { text-align: center; order: 1; }
    .psh-hero__product[b-6hi42ajx36] { order: 0; }
    .psh-hero__label-img[b-6hi42ajx36] { width: 220px; }
    .psh-hero__badge[b-6hi42ajx36] { margin-left: auto; margin-right: auto; }
    .psh-hero__actions[b-6hi42ajx36] { justify-content: center; }
}
/* /Shared/Components/Start/TestimonialCard.razor.rz.scp.css */
/* TestimonialCard — Phase 260 Plan 02
   Tokens: var(--larssons-*) only. Hex literals forbidden. */

.testimonial-card[b-ma1v9qimrg] {
    position: relative;
    background: var(--larssons-cream-light);
    border: 1px solid var(--larssons-cream-dark);
    padding: 2.5rem 2rem 2rem;
    border-radius: 4px;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.testimonial-card:hover[b-ma1v9qimrg] {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(62, 44, 35, 0.1);
}

.testimonial-card__quote-glyph[b-ma1v9qimrg] {
    font-family: var(--larssons-font-display);
    font-size: 3.5rem;
    line-height: 0.6;
    color: var(--larssons-red);
}

.testimonial-card__quote[b-ma1v9qimrg] {
    font-family: var(--larssons-font-accent);
    font-style: italic;
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--larssons-charcoal);
    line-height: 1.55;
    margin: 0;
}

.testimonial-card__cite[b-ma1v9qimrg] {
    font-family: var(--larssons-font-body);
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--larssons-brown-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-style: normal;
}
/* /Shared/Components/Start/WorksWithRow.razor.rz.scp.css */
/* WorksWithRow — Phase 260 Plan 02
   Tokens: var(--larssons-*) only. Hex literals forbidden. */

.wwr[b-qgq3tl1m18] {
    padding: 6rem 3rem 7rem;
    text-align: center;
    background: var(--larssons-cream);
}

.wwr__header[b-qgq3tl1m18] {
    margin-bottom: 3.5rem;
}

.wwr__label-text[b-qgq3tl1m18] {
    font-family: var(--larssons-font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--larssons-red);
    margin-bottom: 0.8rem;
}

.wwr__title[b-qgq3tl1m18] {
    font-family: var(--larssons-font-display);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--larssons-charcoal);
    margin: 0;
}

.wwr__grid[b-qgq3tl1m18] {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    max-width: 800px;
    margin: 0 auto;
}

.wwr__item[b-qgq3tl1m18] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    transition: transform 0.3s;
}

.wwr__item:hover[b-qgq3tl1m18] {
    transform: translateY(-5px);
}

.wwr__icon[b-qgq3tl1m18] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1.5px solid var(--larssons-cream-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    background: var(--larssons-cream-light);
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}

.wwr__item:hover .wwr__icon[b-qgq3tl1m18] {
    border-color: var(--larssons-red);
    background: rgba(139, 26, 16, 0.04);
}

.wwr__label[b-qgq3tl1m18] {
    font-family: var(--larssons-font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--larssons-brown-light);
}

.wwr__item--featured .wwr__icon[b-qgq3tl1m18] {
    border-color: var(--larssons-red);
    background: rgba(139, 26, 16, 0.05);
    box-shadow: 0 0 20px rgba(139, 26, 16, 0.08);
}

.wwr__item--featured .wwr__label[b-qgq3tl1m18] {
    color: var(--larssons-red);
}

@media (max-width: 900px) {
    .wwr[b-qgq3tl1m18] { padding: 4rem 1.5rem 5rem; }
    .wwr__grid[b-qgq3tl1m18] { gap: 1.5rem; }
    .wwr__icon[b-qgq3tl1m18] { width: 64px; height: 64px; font-size: 1.6rem; }
}
/* /Shared/Components/Wealth/BrierBadge.razor.rz.scp.css */
/*
 * Phase 236 Plan 11 — BrierBadge (CALIB-04, D-32).
 * DS tokens only. No hex literals (RazorCssNoHexLiteralsTest gate).
 * Band tokens declared in Client/wwwroot/css/design-system/colors_and_type.css.
 */
.brier-badge[b-u7jtgtvzok] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--size-300);
    font-variant-numeric: tabular-nums;
}

.brier-badge--good[b-u7jtgtvzok]    { background: var(--color-wealth-band-good); }
.brier-badge--watch[b-u7jtgtvzok]   { background: var(--color-wealth-band-watch); }
.brier-badge--breach[b-u7jtgtvzok]  { background: var(--color-wealth-band-breach); }
.brier-badge--nodata[b-u7jtgtvzok]  { background: var(--color-wealth-band-info); }

.brier-badge__value[b-u7jtgtvzok] {
    font-weight: var(--weight-semi);
}

.brier-badge__unit[b-u7jtgtvzok] {
    font-size: var(--size-200);
    opacity: 0.75;
}
/* /Shared/Components/Wealth/DecisionJournalEntryCard.razor.rz.scp.css */
/*
 * Phase 236 Plan 11 — DecisionJournalEntryCard.
 * DS tokens only. No hex literals.
 */
.decision-journal-entry-card[b-foak2wvi2s] {
    display: block;
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--surface-elevated);
    cursor: pointer;
    transition: background var(--motion-fast);
}

.decision-journal-entry-card:hover[b-foak2wvi2s] {
    background: var(--surface-hover);
}

.decision-journal-entry-card--expanded[b-foak2wvi2s] {
    background: var(--surface-elevated);
    cursor: default;
}

.decision-journal-entry-card__preview[b-foak2wvi2s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.decision-journal-entry-card__status[b-foak2wvi2s] {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--size-200);
    font-weight: var(--weight-semi);
}

.decision-journal-entry-card__status--good[b-foak2wvi2s]   { background: var(--color-wealth-band-good); }
.decision-journal-entry-card__status--watch[b-foak2wvi2s]  { background: var(--color-wealth-band-watch); }
.decision-journal-entry-card__status--breach[b-foak2wvi2s] { background: var(--color-wealth-band-breach); }
.decision-journal-entry-card__status--info[b-foak2wvi2s]   { background: var(--color-wealth-band-info); }

.decision-journal-entry-card__agent[b-foak2wvi2s] {
    font-size: var(--size-300);
    font-weight: var(--weight-semi);
}

.decision-journal-entry-card__rec[b-foak2wvi2s] {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--size-200);
    background: var(--surface-subtle);
}

.decision-journal-entry-card__calib-adjusted[b-foak2wvi2s] {
    font-size: var(--size-200);
    color: var(--ink-muted);
}

.decision-journal-entry-card__thesis-preview[b-foak2wvi2s] {
    flex: 1 1 200px;
    font-size: var(--size-300);
    color: var(--ink-muted);
}

.decision-journal-entry-card__criterion-summary[b-foak2wvi2s] {
    font-size: var(--size-200);
    color: var(--ink-muted);
}

.decision-journal-entry-card__expanded[b-foak2wvi2s] {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--surface-subtle);
}

.decision-journal-entry-card__thesis[b-foak2wvi2s] {
    margin: 0 0 var(--space-3) 0;
}

.decision-journal-entry-card__snapshot[b-foak2wvi2s] {
    margin: var(--space-3) 0;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}

.decision-journal-entry-card__kpis[b-foak2wvi2s],
.decision-journal-entry-card__scenarios[b-foak2wvi2s] {
    margin: var(--space-1) 0;
    padding-left: var(--space-3);
}

.decision-journal-entry-card__authored-row[b-foak2wvi2s] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0;
}

.decision-journal-entry-card__autopsy[b-foak2wvi2s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

@media (max-width: 768px) {
    .decision-journal-entry-card__autopsy[b-foak2wvi2s] {
        grid-template-columns: 1fr;
    }
}

.decision-journal-entry-card__autopsy-panel[b-foak2wvi2s] {
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}

.decision-journal-entry-card__autopsy-text[b-foak2wvi2s] {
    font-family: var(--font-mono);
    font-size: var(--size-200);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}
/* /Shared/Components/Wealth/InvalidationCriterionView.razor.rz.scp.css */
/*
 * Phase 236 Plan 11 — InvalidationCriterionView (D-05).
 * DS tokens only. No hex literals.
 */
.invalidation-criterion-view[b-lp38n6sv1j] {
    font-size: var(--size-300);
    color: var(--ink);
    padding: var(--space-1) 0;
}

.invalidation-criterion-view__unknown[b-lp38n6sv1j] {
    opacity: 0.6;
    font-style: italic;
}
/* /Shared/Components/Wealth/KpiPill.razor.rz.scp.css */
/*
 * Phase 234-04 — KpiPill primitive (the ONLY WEALTH numeric rendering path).
 * DS tokens only. No hex literals (RazorCssNoHexLiteralsTest gate).
 * Band tokens declared in Client/wwwroot/css/design-system/colors_and_type.css.
 */
.kpi-pill[b-vfbn0zpzhq] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--size-300);
    font-variant-numeric: tabular-nums;
}

.kpi-pill--good[b-vfbn0zpzhq]   { background: var(--color-wealth-band-good); }
.kpi-pill--watch[b-vfbn0zpzhq]  { background: var(--color-wealth-band-watch); }
.kpi-pill--breach[b-vfbn0zpzhq] { background: var(--color-wealth-band-breach); }
.kpi-pill--info[b-vfbn0zpzhq]   { background: var(--color-wealth-band-info); }

.kpi-pill__value[b-vfbn0zpzhq] {
    font-weight: var(--weight-semi);
}

.kpi-pill__unit[b-vfbn0zpzhq] {
    font-size: var(--size-200);
    opacity: 0.75;
}
/* /Shared/Components/Wealth/WealthChairBriefingCard.razor.rz.scp.css */
.wealth-chair-briefing[b-b71om5prhy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.wealth-briefing-fact[b-b71om5prhy],
.wealth-briefing-risk[b-b71om5prhy],
.wealth-briefing-action[b-b71om5prhy] {
    padding: var(--space-3);
    border-radius: var(--radius-2);
    background: var(--surface-subtle);
    border: 1px solid var(--border);
}

.wealth-briefing-label[b-b71om5prhy] {
    font-size: var(--size-200);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
    margin-bottom: var(--space-1);
    letter-spacing: 0.05em;
}
/* /Shared/Components/Wealth/WealthDissentMapCard.razor.rz.scp.css */
.dissent-map[b-f1jaqyvds5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    background: var(--surface-elevated);
}

.dissent-map-header[b-f1jaqyvds5] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
}

.dissent-map-title[b-f1jaqyvds5] {
    font-weight: var(--weight-semi);
    font-size: var(--size-500);
    color: var(--text-primary);
}

.dissent-map-cornerstone[b-f1jaqyvds5] {
    font-size: var(--size-200);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dissent-grid[b-f1jaqyvds5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.dissent-row[b-f1jaqyvds5] {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) repeat(4, 1fr);
    gap: var(--space-1);
}

.dissent-cell[b-f1jaqyvds5] {
    padding: var(--space-2);
    border-radius: var(--radius-1);
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--size-200);
    color: var(--text-primary);
}

.dissent-cell--label[b-f1jaqyvds5] {
    background: transparent;
    font-weight: var(--weight-semi);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--size-200);
    justify-content: flex-start;
}

[data-dissent="None"][b-f1jaqyvds5]    { background: var(--color-wealth-band-good); }
[data-dissent="Partial"][b-f1jaqyvds5] { background: var(--color-wealth-band-watch); }
[data-dissent="Active"][b-f1jaqyvds5]  { background: var(--color-wealth-band-breach); }

.dissent-cell-glyph[b-f1jaqyvds5] {
    font-size: var(--size-500);
    line-height: 1;
}
/* /Shared/Components/Wealth/WealthHoldingsBadgeTable.razor.rz.scp.css */
.holdings-badge-table[b-8jftzzkmzl] { padding: var(--ds-space-4); }
.holdings-badge-title[b-8jftzzkmzl] { font-size: var(--ds-font-size-lg); font-weight: var(--ds-font-weight-semibold); margin-bottom: var(--ds-space-3); }
.holdings-badge-table__price[b-8jftzzkmzl] { font-variant-numeric: tabular-nums; }
.badge--verified[b-8jftzzkmzl] { color: var(--ds-color-success); font-weight: var(--ds-font-weight-medium); }
.badge--stale[b-8jftzzkmzl]    { color: var(--ds-color-warning); font-weight: var(--ds-font-weight-medium); }
.badge--missing[b-8jftzzkmzl]  { color: var(--ds-color-danger);  font-weight: var(--ds-font-weight-medium); }
/* /Shared/Components/Wealth/WealthTranscriptChunkCard.razor.rz.scp.css */
.transcript-chunk[b-j6rv5jrky1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    background: var(--surface-subtle);
}

.transcript-chunk[data-shadow="true"][b-j6rv5jrky1] {
    border-style: dashed;
    opacity: 0.85;
}

.transcript-chunk-header[b-j6rv5jrky1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}

.agent-kind[b-j6rv5jrky1] {
    font-weight: var(--weight-semi);
    font-size: var(--size-300);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.brier-badge[b-j6rv5jrky1] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    font-size: var(--size-200);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.brier-badge[data-brier-state="Unavailable"][b-j6rv5jrky1] {
    background: var(--surface-subtle);
    border: 1px dashed var(--border);
}

.brier-badge[data-brier-state="Shadow"][b-j6rv5jrky1] {
    background: var(--color-wealth-band-info);
    color: var(--text-muted);
}

.reasoning[b-j6rv5jrky1] {
    font-size: var(--size-500);
    line-height: 1.5;
    color: var(--text-primary);
}
/* /Shared/Components/Wealth/WealthTriageLaneCard.razor.rz.scp.css */
.wealth-triage-lane[b-35rfdy9ulc] {
    margin-bottom: var(--space-4);
}

.wealth-lane-title[b-35rfdy9ulc] {
    font-size: var(--size-400);
    font-weight: var(--weight-semi);
    margin-bottom: var(--space-2);
}

.wealth-lane-empty[b-35rfdy9ulc] {
    color: var(--text-muted);
}

.wealth-triage-card[b-35rfdy9ulc] {
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    padding: var(--space-3);
    cursor: pointer;
    margin-bottom: var(--space-2);
    background: var(--surface);
}

.wealth-triage-card--expanded[b-35rfdy9ulc] {
    border-color: var(--ink);
}

.wealth-card-preview[b-35rfdy9ulc] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.wealth-card-agent-label[b-35rfdy9ulc] {
    font-weight: var(--weight-medium);
}

.wealth-card-rec-badge[b-35rfdy9ulc] {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-2);
    font-size: var(--size-200);
    background: var(--surface-subtle);
}

.wealth-card-kpi-pill[b-35rfdy9ulc] {
    font-size: var(--size-200);
    color: var(--text-muted);
}

.wealth-card-expanded-content[b-35rfdy9ulc] {
    margin-top: var(--space-3);
    border-top: 1px solid var(--border);
    padding-top: var(--space-3);
}

.wealth-card-narrative[b-35rfdy9ulc] {
    margin-bottom: var(--space-2);
}

.wealth-card-confidence[b-35rfdy9ulc] {
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.wealth-consider-deferred-note[b-35rfdy9ulc] {
    font-style: italic;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.wealth-slide-confirm[b-35rfdy9ulc] {
    height: 2rem;
    background: var(--surface-subtle);
    border-radius: var(--radius-2);
    margin-top: var(--space-2);
    border: 1px solid var(--border);
}

/* Phase 236-12 (D-22, CALIB-05) — "Kalibreringsjusterad" pill on Considers/ActionCandidates
   whose backing journal entry was auto-downgraded by the Brier calibration gate.
   Tokens-only per design-system contract; --status-warn is the amber accent for caution states. */
.triage-card__calib-adjusted[b-35rfdy9ulc] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-wealth-band-watch);
    color: var(--status-warn);
    font-size: var(--size-100);
    font-weight: var(--weight-medium);
    text-decoration: none;
    border: 1px solid var(--border);
}

.triage-card__calib-adjusted:hover[b-35rfdy9ulc] {
    background: var(--surface-subtle);
}

.triage-card__calib-arrow[b-35rfdy9ulc] {
    font-weight: var(--weight-bold);
}
/* /Shared/ImageCard.razor.rz.scp.css */
.ImageCardTitle[b-2ca3u6ugaa] {
    font-size: 20px;
    font-weight: 700;
    /*padding-top: 50px;*/
}

.ImageCardPrice[b-2ca3u6ugaa] {
    font-size: larger;
    font-weight: 700;
    right: 1em;
    top: 12px;
    position: absolute;
}

.ImageCard[b-2ca3u6ugaa] {
    background: url("https://storageaccountqonnect.blob.core.windows.net/web/7d841ce9-4d80-4647-8f7d-9f8b243bd05d.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 450px;
    left: 0;
    bottom: 0;
    width: 100%;
    /*padding-top: 50px;*/
}

.ImageCard .content[b-2ca3u6ugaa] {
    position: absolute; /* Position the background text */
    bottom: 5px; /* At the bottom. Use top:0 to append it to the top */
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
    color: #f1f1f1; /* Grey text */
    width: 100%; /* Full width */
    padding: 5px; /* Some padding */
}

[b-2ca3u6ugaa] .e-btn.e-outline, .e-css.e-btn.e-outline[b-2ca3u6ugaa] {
    background-color: rgba(0,0,0,0);
    border-color: #FFF;
    box-shadow: none;
    color: #FFF;
    margin: 2px;
    font-weight: 500;
    width: 180px;
}

.CardBottomMargin[b-2ca3u6ugaa] {
    padding-bottom: 10px;
}

[b-2ca3u6ugaa] .e-card .e-card-content {
    padding: 0px;
}

.e-priceButtonWidth[b-2ca3u6ugaa] {
    background: rgba(255, 255, 255, 0.7);
    width: 3.5rem;
    color: #6c757d;
    margin-top: 10px;
}
/* /Shared/ImageCardBunThitNuong.razor.rz.scp.css */
.ImageCardTitle[b-wg2sqpzhw3] {
    font-size: 20px;
    font-weight: 700;
    /*padding-top: 50px;*/
}

.ImageCardPrice[b-wg2sqpzhw3] {
    font-size: larger;
    font-weight: 700;
    right: 1em;
    top: 12px;
    position: absolute;
}

.ImageCard2[b-wg2sqpzhw3] {
    background: url("https://storageaccountqonnect.blob.core.windows.net/web/3392acd3-6617-4169-91c0-9bdb04bbcd4f.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 450px;
    left: 0;
    bottom: 0;
    width: 100%;
    /*padding-top: 50px;*/
}

.ImageCard2 .content[b-wg2sqpzhw3] {
    position: absolute; /* Position the background text */
    bottom: 5px; /* At the bottom. Use top:0 to append it to the top */
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
    color: #f1f1f1; /* Grey text */
    width: 100%; /* Full width */
    padding: 5px; /* Some padding */
}

[b-wg2sqpzhw3] .ImageCardButton {
    background-color: rgba(0,0,0,0);
    border-color: #FFF;
    box-shadow: none;
    color: #FFF;
    font-weight: 500;
    margin: 2px;
    width: 280px;
}

.CardBottomMargin[b-wg2sqpzhw3] {
    padding-bottom: 10px;
}

[b-wg2sqpzhw3] .e-card .e-card-content {
    padding: 0px;
}

.e-priceButtonWidth[b-wg2sqpzhw3] {
    background: rgba(255, 255, 255, 0.7);
    width: 3.5rem;
    color: #6c757d;
    margin-top: 10px;
}
/* /Shared/LogoCard.razor.rz.scp.css */

#LogoContent[b-zyo0xbjjuj] {
    padding-top: 1rem;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.LogoTitle[b-zyo0xbjjuj] {
    padding-left: 5px;
    font-size: large;
    font-weight: 500;
}

.container[b-zyo0xbjjuj] {
    width: 100%;
    padding-top: 20px; 
}

.center[b-zyo0xbjjuj] {
    margin: auto;
    display: block;
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-5b27zmpcxc] {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Phase 195 — operator notification strip (top of page, bell on the right) */
.notification-strip[b-5b27zmpcxc] {
    position: relative;
    z-index: 1100;
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    padding: 0.25rem 0.75rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.main[b-5b27zmpcxc] {
    flex: 1;
}

.sidebar[b-5b27zmpcxc] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-5b27zmpcxc] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-5b27zmpcxc]  a, .top-row .btn-link[b-5b27zmpcxc] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-5b27zmpcxc] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-5b27zmpcxc] {
        display: none;
    }

    .top-row.auth[b-5b27zmpcxc] {
        justify-content: space-between;
    }

    .top-row a[b-5b27zmpcxc], .top-row .btn-link[b-5b27zmpcxc] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-5b27zmpcxc] {
        flex-direction: row;
    }

    .sidebar[b-5b27zmpcxc] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-5b27zmpcxc] {
        position: sticky;
        top: 0;
    }

    .main > div[b-5b27zmpcxc] {
        /*padding-left: 2rem !important;*/
        padding-right: 1.5rem !important;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-v57n6p1647] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-v57n6p1647] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-v57n6p1647] {
    font-size: 1.1rem;
}

.oi[b-v57n6p1647] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-v57n6p1647] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-v57n6p1647] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-v57n6p1647] {
        padding-bottom: 1rem;
    }

    .nav-item[b-v57n6p1647]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-v57n6p1647]  a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item[b-v57n6p1647]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-v57n6p1647] {
        display: none;
    }

    .collapse[b-v57n6p1647] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}
/* /Shared/PokeBowl.razor.rz.scp.css */
.ImageCardTitle[b-0corq0m945] {
    font-size: 20px;
    font-weight: 700;
    /*padding-top: 50px;*/
}

.ImageCardPrice[b-0corq0m945] {
    font-size: larger;
    font-weight: 700;
    right: 1em;
    top: 12px;
    position: absolute;
}

.ImageCardPoke[b-0corq0m945] {
    background: url("https://storageaccountqonnect.blob.core.windows.net/web/fc3eeb7b-f3c8-46ca-b1c5-1d79c16fb1c4.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 450px;
    left: 0;
    bottom: 0;
    width: 100%;
    /*padding-top: 50px;*/
}

.ImageCardPoke .content[b-0corq0m945] {
    position: absolute; /* Position the background text */
    bottom: 5px; /* At the bottom. Use top:0 to append it to the top */
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
    color: #f1f1f1; /* Grey text */
    width: 100%; /* Full width */
    padding: 5px; /* Some padding */
}

[b-0corq0m945] .e-btn.e-outline, .e-css.e-btn.e-outline[b-0corq0m945] {
    background-color: rgba(0,0,0,0);
    border-color: #FFF;
    box-shadow: none;
    color: #FFF;
    margin: 2px;
    font-weight: 500;
    width: 180px;
}

.CardPositionCenter[b-0corq0m945] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.CardBottomMargin[b-0corq0m945] {
    padding-bottom: 10px;
}

[b-0corq0m945] .e-card .e-card-content {
    padding: 0px;
}
/* /Shared/PricingSelectPrompt.razor.rz.scp.css */
.CardPositionCenter[b-t6ow5b4pmw] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.Welcome[b-t6ow5b4pmw] {
    text-align: center;
    font-size: 4rem;
    color: #696969;
}

[b-t6ow5b4pmw] .PriceSelectionButton {
    background: #FFFFFF;
    color: #6c757d;
    text-align: left;
    height: 4rem;
    width: 10rem;
    margin-right: 5px;
}

[b-t6ow5b4pmw] .PriceSelectionButtonSelected {
    background: #28A745;
    color: #FFFFFF;
}

.fade-in-text-2[b-t6ow5b4pmw] {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 150px;
    animation: fadeIn-b-t6ow5b4pmw linear 2s;
    -webkit-animation: fadeIn linear 2s;
    -moz-animation: fadeIn linear 2s;
    -o-animation: fadeIn linear 2s;
    -ms-animation: fadeIn linear 2s;
}

.fade-in-text-4[b-t6ow5b4pmw] {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 150px;
    animation: fadeIn-b-t6ow5b4pmw linear 4s;
    -webkit-animation: fadeIn linear 4s;
    -moz-animation: fadeIn linear 4s;
    -o-animation: fadeIn linear 4s;
    -ms-animation: fadeIn linear 4s;
}

.fade-in-text-6[b-t6ow5b4pmw] {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 150px;
    animation: fadeIn-b-t6ow5b4pmw linear 6s;
    -webkit-animation: fadeIn linear 6s;
    -moz-animation: fadeIn linear 6s;
    -o-animation: fadeIn linear 6s;
    -ms-animation: fadeIn linear 6s;
}

@keyframes fadeIn-b-t6ow5b4pmw {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
/* /Shared/ProductDetailDialog.razor.rz.scp.css */
/* ProductDetailDialog — token migration
   Token source: design-system/colors_and_type.css */

.dialog-product-summary[b-35yw8arshl] {
    background: var(--surface-subtle);
    padding: var(--space-4);
    border-radius: var(--radius-4);
}

.dialog-product-number[b-35yw8arshl] {
    font-size: var(--size-500);
    font-weight: var(--weight-bold);
    font-family: var(--font-mono);
    color: var(--text-muted);
}

.dialog-product-name[b-35yw8arshl] {
    font-weight: var(--weight-bold);
    font-size: var(--size-500);
    color: var(--ink);
}

.dialog-product-price[b-35yw8arshl] {
    font-size: var(--size-500);
    font-weight: var(--weight-bold);
    color: var(--ink);
    font-family: var(--font-mono);
}

.dialog-section-title[b-35yw8arshl] {
    font-size: var(--size-500);
    font-weight: var(--weight-bold);
    color: var(--ink);
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
}

#wrapper[b-35yw8arshl] {
    width: auto;
    height: auto;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 50px auto 65px;
}

#left[b-35yw8arshl] {
    height: 65px;
}

#Center[b-35yw8arshl] {
    text-align: left;
    height: 65px;
}

#right[b-35yw8arshl] {
    height: 65px;
}

[b-35yw8arshl] .multilineHeight {
    height: 5em;
}

[b-35yw8arshl] .Pay {
    position: absolute;
    right: 15px;
}
/* /Shared/ProductList.razor.rz.scp.css */
[b-nsbort3wpf] .HeaderButton {
    background: rgba(255, 255, 255, 0.7);
    height: 4em;
    right: 1.0667em;
    position: absolute;
    bottom: 3.2em;
    width: 20em;
    font-size: large;
    color: #000000;
}

.HeaderImageHeight[b-nsbort3wpf] {
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*Category Header*/
.e-listview .e-list-group-item .buttonPosition[b-nsbort3wpf] {
    right: 1em;
    position: absolute;
}

#List .ProductNumber[b-nsbort3wpf] {
    font-size: large;
    padding-top: 5px;
    padding-left: 0.6em;
}

#List .ProductPrice[b-nsbort3wpf] {
    font-size: small;
    padding-top: 20px;
    font-weight: 400;
}

#List .ProductDescription[b-nsbort3wpf] {
    width: 98%;
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 12px !important;
    font-size: large;
    padding-top: 2px;
    padding-left: 0.6em;
}

#List .ProductName[b-nsbort3wpf] {
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 14px !important;
    font-weight: 700;
    font-size: large;
    padding-top: 5px;
    padding-left: 0.6em;
}

[b-nsbort3wpf] .e-card .e-card-content {
    padding: 0px;
}

[b-nsbort3wpf] .e-priceButtonWidth {
    background: rgba(255, 255, 255, 0.7);
    width: 3.5rem;
    height: 2rem;
    color: #6c757d;
    margin-top: 10px;
    margin-bottom: 10px;
}

/*Sflistview row layout*/
#wrapper[b-nsbort3wpf] {
    width: auto;
    height: auto;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: auto 65px;
}

#left[b-nsbort3wpf] {

}

#Center[b-nsbort3wpf] {
    text-align: left;

}

#right[b-nsbort3wpf] {

}

.CardBottomMargin[b-nsbort3wpf] {
    padding-bottom: 10px;
}

[b-nsbort3wpf] .e-dialog {
    max-height: 100%;
    max-width: 100%;
    min-width: 240px;
    position: absolute;
}

.line[b-nsbort3wpf] {
    width: 112px;
    height: 47px;
    border-bottom: 1px solid black;
    position: absolute;
}

.Title[b-nsbort3wpf] {
    background: rgba(0, 0, 0, 0.4);
    padding: 20px 40px; 
    color: #FFFFFF;
    font-size: 48px;
    font-weight: 700;

}

[b-nsbort3wpf] .ImageCard {
    background: url("https://storageaccountqonnect.blob.core.windows.net/web/fc3eeb7b-f3c8-46ca-b1c5-1d79c16fb1c4.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 450px;
    left: 0;
    bottom: 0;
    width: 100%;
    /*padding-top: 50px;*/
}
/* /Shared/RestaurantFooter.razor.rz.scp.css */
.FooterBottom[b-wr7vrxbrkr] {
    padding-bottom: 20px;
}

[b-wr7vrxbrkr] .WelcomeCard {
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #4e4e4e;
    left: 0;
    bottom: 0;
    border-color: #ffffff;
}

.h4[b-wr7vrxbrkr], h4[b-wr7vrxbrkr] {
    font-size: 1.5rem;
    color: #f2f2f2;
}

.footer-icon[b-wr7vrxbrkr] {
    margin-right: 8px;
    opacity: 0.9;
}

.footerContent[b-wr7vrxbrkr] {
    padding: 0;
    margin: 0 auto;
    height: 5rem;
    color: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* DivTable.com */
.divTable[b-wr7vrxbrkr] {
    display: table;
    width: 65%;
    min-width: 250px;
    margin: 0 auto;
    padding-bottom: 1rem;
}

.divTableRow[b-wr7vrxbrkr] {
    display: table-row;
}

.divTableCell[b-wr7vrxbrkr], .divTableHead[b-wr7vrxbrkr] {
    border: 0px solid #999999;
    display: table-cell;
    padding: 3px 10px;
    font-family: Helvetica, 'Segoe UI' !important;
    font-size: 16px !important;
}

.divTableHeading[b-wr7vrxbrkr] {
    background-color: #EEE;
    display: table-header-group;
    font-weight: bold;
}

.divTableFoot[b-wr7vrxbrkr] {
    background-color: #EEE;
    display: table-footer-group;
    font-weight: bold;
}

.divTableBody[b-wr7vrxbrkr] {
    display: table-row-group;
}

/* Clickable links */
.footer-link[b-wr7vrxbrkr],
.footer-link:visited[b-wr7vrxbrkr],
.footer-link:link[b-wr7vrxbrkr] {
    color: #f2f2f2 !important;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-link:hover[b-wr7vrxbrkr] {
    color: #ffffff !important;
    opacity: 0.8;
    text-decoration: underline;
}

.phone-content[b-wr7vrxbrkr] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 18px;
}

.address-link[b-wr7vrxbrkr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    line-height: 1.6;
    text-align: center;
}

/* /Shared/Welcome.razor.rz.scp.css */
<h3>Welcome.razor</h3>

@code[b-biozuy0if7] {

}