:root { --brand: #0ca0e6; }

body { font-family: Vazirmatn, Tahoma, sans-serif; }

.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; }

.btn {
    background: var(--brand);
    color: #fff;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 700;
    display: inline-block;
    text-align: center;
}
.btn:hover { filter: brightness(0.95); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
    background: #f3f4f6;
    color: #374151;
    border-radius: 10px;
    font-weight: 600;
}

.input {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
}
.input:focus { outline: 2px solid #bae6fd; border-color: var(--brand); }

.label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.hint { font-size: 12px; color: #6b7280; margin-top: 6px; }

.tab {
    padding: 8px 14px;
    border-radius: 10px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 14px;
    font-weight: 600;
}
.tab.active { background: var(--brand); color: #fff; }

.th { text-align: right; padding: 10px 12px; font-weight: 600; font-size: 12px; }
.td { padding: 10px 12px; border-bottom: 1px solid #f3f4f6; }

.badge { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge-ok { background: #ecfdf5; color: #047857; }
.badge-warn { background: #fffbeb; color: #b45309; }
.badge-bad { background: #fef2f2; color: #b91c1c; }

.link { color: var(--brand); font-size: 13px; margin-left: 8px; }