.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-base);
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all 0.2s;
}

.btn:hover { text-decoration: none; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-primary {
    background-color: var(--color-primary);
    color: white;
}
.btn-primary:hover { background-color: var(--color-primary-dark); }

.btn-outline {
    background-color: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
}
.btn-outline:hover { background-color: var(--color-bg); }

.btn-danger {
    background-color: var(--color-danger);
    color: white;
}
.btn-danger:hover { opacity: 0.9; }

.btn-sm { padding: var(--space-1) var(--space-2); font-size: 0.875rem; }
.btn-lg { padding: var(--space-3) var(--space-6); font-size: 1.125rem; }
.btn-block { width: 100%; }

.form-group {
    margin-bottom: var(--space-4);
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--space-1);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    background-color: var(--color-surface);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-group textarea { resize: vertical; min-height: 100px; }

.field-hint {
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-top: var(--space-1);
}

.field-error {
    font-size: 0.875rem;
    color: var(--color-danger);
    margin-top: var(--space-1);
}

.field-invalid { border-color: var(--color-danger) !important; }

.form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.form-checkbox input { width: auto; }
.form-checkbox label { margin-bottom: 0; font-weight: normal; }

.form-card {
    background-color: var(--color-surface);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-base);
    max-width: 600px;
}

.form-large { max-width: 800px; }
.form-actions { display: flex; gap: var(--space-4); margin-top: var(--space-6); }

.stat-card {
    background-color: var(--color-surface);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.stat-value { font-size: 2.5rem; font-weight: 700; color: var(--color-primary); }
.stat-label { color: var(--color-text-light); margin-top: var(--space-2); }

.feature-card,
.quick-link-card,
.admin-card {
    background-color: var(--color-surface);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--color-text);
    transition: box-shadow 0.2s;
}

.feature-card:hover,
.quick-link-card:hover,
.admin-card:hover {
    box-shadow: var(--shadow-lg);
    text-decoration: none;
}

.feature-card h3,
.quick-link-card h3,
.admin-card h3 { margin-bottom: var(--space-2); }

.feature-card p,
.quick-link-card p,
.admin-card p { color: var(--color-text-light); margin-bottom: 0; }

.achievement-card {
    background-color: var(--color-surface);
    padding: var(--space-4);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-sm);
}

.achievement-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: var(--space-2); }
.achievement-header h3 { margin-bottom: 0; font-size: 1rem; }
.achievement-description { color: var(--color-text-light); font-size: 0.875rem; margin-bottom: var(--space-3); }
.achievement-actions { display: flex; gap: var(--space-2); }

.category-badge {
    display: inline-block;
    padding: 2px 8px;
    background-color: var(--color-bg);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--color-text-light);
}

.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.status-draft { background-color: #fef3c7; color: #92400e; }
.status-generated { background-color: #dbeafe; color: #1e40af; }
.status-submitted { background-color: #d1fae5; color: #065f46; }
.status-archived { background-color: #e5e7eb; color: #374151; }
.status-succeeded { background-color: #d1fae5; color: #065f46; }
.status-pending { background-color: #fef3c7; color: #92400e; }
.status-failed { background-color: #fee2e2; color: #991b1b; }
.status-active { background-color: #d1fae5; color: #065f46; }
.status-inactive { background-color: #fee2e2; color: #991b1b; }

.data-table { background-color: var(--color-surface); border-radius: var(--radius-base); overflow: hidden; }
.data-table th { cursor: pointer; user-select: none; }
.data-table th:hover { background-color: var(--color-border); }

.tabs-container { background-color: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-base); }

.tabs-navigation {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
}

.tab-btn {
    padding: var(--space-4) var(--space-6);
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
    color: var(--color-text-light);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.tab-btn:hover { color: var(--color-text); }
.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.tabs-content { padding: var(--space-6); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

.inline-editor-container { margin-top: var(--space-4); }
.editor-preview { white-space: pre-wrap; line-height: 1.6; padding: var(--space-4); background-color: var(--color-bg); border-radius: var(--radius-base); }
.editor-input { width: 100%; min-height: 200px; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-base); font-family: var(--font-mono); }
.editor-actions { margin-top: var(--space-4); display: flex; gap: var(--space-2); }

.section-actions { display: flex; gap: var(--space-2); }
.section-meta { font-size: 0.875rem; color: var(--color-text-light); margin-top: var(--space-2); }

.package-actions { margin-top: var(--space-8); text-align: center; }

.plan-card {
    background-color: var(--color-surface);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-base);
    text-align: center;
}

.plan-card.plan-current { border: 2px solid var(--color-primary); }
.plan-price { font-size: 2rem; font-weight: 700; margin: var(--space-4) 0; }
.plan-price span { font-size: 1rem; font-weight: normal; color: var(--color-text-light); }
.plan-features { list-style: none; padding: 0; margin: var(--space-6) 0; text-align: left; }
.plan-features li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.plan-note { color: var(--color-text-light); font-size: 0.875rem; }

.usage-card { text-align: center; padding: var(--space-6); background-color: var(--color-surface); border-radius: var(--radius-lg); }
.usage-value { font-size: 3rem; font-weight: 700; color: var(--color-primary); }
.usage-label { color: var(--color-text); margin-top: var(--space-2); }
.usage-limit { color: var(--color-text-light); margin-top: var(--space-1); }
.usage-bar { height: 8px; background-color: var(--color-bg); border-radius: var(--radius-sm); margin-top: var(--space-4); overflow: hidden; }
.usage-bar-fill { height: 100%; background-color: var(--color-primary); border-radius: var(--radius-sm); }

.invoice-card { background-color: var(--color-surface); padding: var(--space-8); border-radius: var(--radius-lg); box-shadow: var(--shadow-base); max-width: 800px; margin: 0 auto; }
.invoice-header { display: flex; justify-content: space-between; margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); }
.invoice-table { margin-bottom: var(--space-6); }
.invoice-table tfoot { font-weight: 600; background-color: var(--color-bg); }
.invoice-footer { text-align: center; color: var(--color-text-light); }

.alert {
    padding: var(--space-4);
    border-radius: var(--radius-base);
    margin-bottom: var(--space-4);
}

.alert-info { background-color: #dbeafe; color: #1e40af; }
.alert-success { background-color: #d1fae5; color: #065f46; }
.alert-warning { background-color: #fef3c7; color: #92400e; }
.alert-error { background-color: #fee2e2; color: #991b1b; }

.empty-state { text-align: center; color: var(--color-text-light); padding: var(--space-8); }
.empty-state-card { text-align: center; padding: var(--space-12); background-color: var(--color-surface); border-radius: var(--radius-lg); }

.error-container { display: flex; justify-content: center; align-items: center; min-height: 50vh; }
.error-card { text-align: center; }
.error-card h1 { font-size: 6rem; color: var(--color-text-light); margin-bottom: 0; }
.error-card h2 { margin-bottom: var(--space-4); }

.hero { text-align: center; padding: var(--space-16) 0; }
.hero h1 { font-size: 3rem; margin-bottom: var(--space-4); }
.hero-subtitle { font-size: 1.25rem; color: var(--color-text-light); margin-bottom: var(--space-8); }
.hero-actions { display: flex; gap: var(--space-4); justify-content: center; }

.auth-container { display: flex; justify-content: center; align-items: center; min-height: 60vh; }
.auth-card { background-color: var(--color-surface); padding: var(--space-8); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 400px; }
.auth-card h1 { text-align: center; margin-bottom: var(--space-6); }
.auth-link { text-align: center; margin-top: var(--space-4); color: var(--color-text-light); }

.benefits-list { list-style: none; padding: 0; max-width: 600px; margin: var(--space-6) auto; }
.benefits-list li { padding: var(--space-3) 0; padding-left: var(--space-6); position: relative; }
.benefits-list li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background-color: var(--color-success); border-radius: 50%; }

.meta { color: var(--color-text-light); font-size: 0.875rem; }